[JAVA | 리팩토링] 메뉴 클릭 시 색상 바꾸기

- 기존코드 

		<div class="sysMenu1">
			<div class="sm1">
				<p class="sysMenu1-sm1-A sysMenu1-sm1-style">A</p>
			</div>
			<div class="sm1">
				<p class="sysMenu1-sm1-B sysMenu1-sm1-style">B</p>
			</div>
			<div class="sm1">
				<p class="sysMenu1-sm1-C sysMenu1-sm1-style">C</p>
			</div>
			<div class="sm1">
				<p class="sysMenu1-sm1-D sysMenu1-sm1-style">D</p>
			</div>			
		</div>

$(".sysMenu1-sm1-style").on("click", sysMenu1Sm1Style)
function sysMenu1Sm1Style() {
    $(".sysMenu1-sm1-style").removeClass("colorWhite");
    if ($(".TEST1").hasClass("displayblock") && !$(".TEST").hasClass("displayblock")) {
        $(".sysMenu1-sm1-TEST1").addClass("colorWhite");
        return;
    } else if ($(".TEST2").hasClass("displayblock") && !$(".standard-ALL").hasClass("displayblock")) {
        $(".sysMenu1-sm1-TEST2").addClass("colorWhite");
        return;
    } else if ($(".TEST3").hasClass("displayblock") && !$(".TEST1").hasClass("displayblock")) {
        $(".sysMenu1-sm1-TEST3").addClass("colorWhite");
        return;
    }
}

 

if, else if 로 처리가 되어있다.

$(".sysMenu1-sm1-style").on("click", sysMenu1Sm1Style);
function sysMenu1Sm1Style() {
$(".sysMenu1-sm1-style").removeClass("colorWhite");
	const clickedClasses = $(this).attr("class").split(" ");
	const sections = [
					{ section: ".A", menu: ".sysMenu1-sm1-Al" },
					{ section: ".B", menu: ".sysMenu1-sm1-B" },
					{ section: ".CL", menu: ".sysMenu1-sm1-C" },
					{ section: ".D", menu: ".sysMenu1-sm1-D" }
					];
	for (const { section, menu } of sections) {
		const menuClass = menu.replace(".", ""); 
		console.log(menuClass);
		if (clickedClasses.includes(menuClass)) {
			$(menu).addClass("colorWhite");
		break;
		}
	}
}

 

이러면 더 깔끔하게 가능하다!