이 jQuery 코드를 어떻게 단순화 할 수 있습니까?

Question

나는 한 번에 하나씩 다른 div보다 약간 더 불투명하게 div를 만들려고합니다. 보시다시피 이미 변수를 만들어 일부를 단순화했습니다. 1 줄에 당신은

var f1 = $('#f1'); 
var f2 = $('#f2'); 
var f3 = $('#f3'); 
var f4 = $('#f4'); 

if(art==1){ 
f1.css('opacity',1); 
f2.css('opacity',0.9); 
f3.css('opacity',0.9); 
f4.css('opacity',0.9); 
}else if(art==2){ 
f1.css('opacity',0.9); 
f2.css('opacity',1); 
f3.css('opacity',0.9); 
f4.css('opacity',0.9); 
}else if(art==3){ 
f1.css('opacity',0.9); 
f2.css('opacity',0.9); 
f3.css('opacity',1); 
f4.css('opacity',0.9); 
}else if (art==4){ 
f1.css('opacity',0.9); 
f2.css('opacity',0.9); 
f3.css('opacity',0.9); 
f4.css('opacity',1); 
} 

Answer 1

$("#f1,#f2,#f3,#f4").css("opacity", 0.9); 
$("#f" + art).css("opacity", 1); 

또는를 할 수있는 :

$("#f1,#f2,#f3,#f4").css("opacity", 0.9).filter("#f" + art).css("opacity", 1); 

를 내가보기 엔 당신이 # f를 + 예술 에 해당 사업부에 대한 불투명도의 변화를 볼 것입니다 의심하지만, 당신이 한 경우가 당신이 그것을 고칠 수있는 방법은 다음과 같습니다 :

$("#f1,#f2,#f3,#f4").not("#f" + art).css("opacity", 0.9); 
$("#f" + art).css("opacity", 1); 

이것은 우리가 지정한 값 중 하나를 걸러 내는데 이상합니다 이미 ified하지만 그렇지 않으면 여분의 논리를 사용하여 해당 값을 제거해야한다고 생각합니다.

추신. 이 코드 냄새 당신은 jQuery를이 결과 집합을 사용하는 방법에 대해 조금 (아니라 하나의 요소를) 읽어야

Answer 2

어떻게

var f1 = $('#f1'); 
var f2 = $('#f2'); 
var f3 = $('#f3'); 
var f4 = $('#f4'); 

var fAll = $([f1, f2, f3, f4]); 

fAll 
    .css('opacity',0.9) 
    .eq(art-1) // -1 because arrays are 0-based 
    .css('opacity',1); 

에 대해 (F + 예술) 방법에 traverse 및 manipulate 그들에게

입니다

Answer 3

이것은 단순하지는 않지만 좋은 구조입니다.

var f1 = $("#f1"), 
f2 = $("#f2"), 
f3 = $("#f3"), 
f4 = $("#f4"); 
art == 1 ? (f1.css("opacity", 1), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 2 ? (f1.css("opacity", .9), f2.css("opacity", 1), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 3 ? (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", 1), f4.css("opacity", .9)) : art == 4 && (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", 1)) 

당신이 [여기 질문의이 같은 종류]를 게시 한 후 왜이 권리를 게시하는