如何简化此 jQuery 代码？答案

【问题标题】：How can I simplify this jQuery code?如何简化此 jQuery 代码？
【发布时间】：2012-02-22 00:32:57
【问题描述】：

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

【问题讨论】：

你为什么在你发布this same type of question here之后马上发布这个？从以前的答案中学习，并在此代码上自己尝试一些东西。如果您自己尝试某事时遇到困难，请提出更具体的问题。我们不是来为您重写代码的。投票结束，因为过于本地化。
因为你不能用 for 循环真正做到这一点。我昨天才开始使用 jQuery。

标签： jquery simplify

【解决方案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）

【讨论】：

【解决方案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 的内容

【讨论】：

【解决方案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))

【讨论】：