Как я могу упростить этот код JQuery? - PullRequest
Новая
       9

Как я могу упростить этот код JQuery?

0 голосов
/ 22 февраля 2012

Я пытаюсь сделать каждый div чуть более непрозрачным, чем другие, по одному за раз.Как вы можете видеть, я упростил некоторые из них, создав переменные. 

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);
}

Ответы [ 3 ]

4 голосов
/ 22 февраля 2012 
$("#f1,#f2,#f3,#f4").css("opacity", 0.9);
$("#f" + art).css("opacity", 1);

или в 1 строку вы можете сделать: 

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

Я очень сомневаюсь, что вы увидите изменение непрозрачности для div, соответствующее # f + art но если бы вы сделали, есть способ исправить это так: 

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

, что довольно странно отфильтровывать одно из значений, которые мы уже указали, но я думаю, что в противном случае вам придется использовать дополнительную логику для удаления этого значения.

PS. Это кодовый запах (f + art)

0 голосов
/ 09 ноября 2012

Это не очень упрощенно, но хорошая структура. 

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))
0 голосов
/ 22 февраля 2012

Как насчет 

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);

Вы должны прочитать немного о том, как jQuery использует наборы результатов ( не только отдельные элементы ) и как пройти и манипулировать им

...