javascript - 将多行 var = false 代码压缩到更少的行？

Question

我有十个按钮。单击一个按钮时，我希望相应的 div 淡入；单击另一个按钮时，我希望该 div 淡出，而新的 div 淡入。

由于我对 JS 的了解有限，所以我的方法无法正常工作。我目前正在运行这样的东西:

var active01 = false;
var active02 = false;
var active03 = false;
var active04 = false;
var active05 = false;

$("#button1").click(function () {
    active02 = false;
    active03 = false;
    active04 = false;
    active05 = false;
    active01 = true;
});

if(active01){
//fadein;
} else{
//fadeout;
}

有没有一种方法可以将所有事件按钮设置为 false 而不必每次都写出所有内容？像这样的……

var active01 = false;
var active02 = false;
var active03 = false;
var active04 = false;
var active05 = false;
var actives = active01, active02, active03, active04, active05;

$("#button1").click(function () {
    actives = false;
    active01 = true;
});

Answer 1

您可以选择使用数据元素来帮助您。例如……

<input type="button" data-key="1">
<input type="button" data-key="2">
<div data-key="1"></div>
<div data-key="2"></div>

鉴于此设置，您可以在输入上拥有事件处理程序。单击打开时，淡化所有 div。然后使用 $('div').filter('[data-key="'+ $(this).data('key') +'"]') 找到与您的输入对应的 div然后您可以在其上执行淡入逻辑。