Question

我试图让每个div比其他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);
}

Answer 1

$("#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);

我非常怀疑你会看到对应于＃f + art的div的不透明度的变化但如果你这样做，有一种方法可以解决这个问题：

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

过滤掉我们已指定的值之一有点奇怪，但我认为否则你需要使用额外的逻辑来删除该值。

PS。这是一种代码气味（f + art）

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

您应该阅读一些关于jQuery如何使用结果集（不仅仅是单个元素）以及如何traverse和manipulate使用

的内容

我该如何简化这个jQuery代码？

2 个答案: