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，然后您可以在其上执行淡入逻辑。

Answer 2

使用数组

var active = [];
for(i = 0; i<10; i++){
    active.push(false);
}
$("#button1").click(function () {
    for(i = 0; i<active.length; i++){
        active[i] = false;
    }
    active[1] = true;
});

Answer 3

我会像这样使用它

＆＃13;

$('.fade-target-container').on('click', function() {
  var targetContainer = $(this).attr('data-target');

  $('.fadeable-div').hide('fast');
  $('#' + targetContainer).show('fast');
});

＆＃13;

.fadeable-div {
 display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="fade-target-container" data-target="div1">My Button 01</button>
<button class="fade-target-container" data-target="div2">My Button 02</button>
<button class="fade-target-container" data-target="div3">My Button 03</button>
<button class="fade-target-container" data-target="div4">My Button 04</button>
<button class="fade-target-container" data-target="div5">My Button 05</button>

<div class="fadeable-div" id="div1">DIV1</div>
<div class="fadeable-div" id="div2">DIV2</div>
<div class="fadeable-div" id="div3">DIV3</div>
<div class="fadeable-div" id="div4">DIV4</div>
<div class="fadeable-div" id="div5">DIV5</div>

＆＃13;

Answer 4

很难在没有看到HTML的情况下给出确切的答案，但我可以用伪代码给你，我们可以从那里开始。

您不需要变量来执行此操作。。。根据您的说法，您希望隐藏所有div，除非点击相关按钮，然后只显示div一个$(".commonButtonClass").on("click", function() { $(".commonDivClass").fadeOut(); $("...SELECTOR_TO_FIND_THE_ASSOCIATED_DIV...").fadeIn(); });。您可以非常轻松地使用jQuery选择器完成此操作。

div

每个commonDivClass都需要为其分配commonButtonClass类，并且按钮需要为其分配div。然后，根据将按钮与其特定div关联的任何关系，您需要创建正确的选择器以替换“... SELECTOR_TO_FIND_THE_ASSOCIATED_DIV ...”。

使用此功能，您无需跟踪$('.square').click(function(){ // Toggle the "clicked" class for the item $(this).toggleClass('clicked'); // If toggleClass added the class (ie: selected the square) // we need to add it to the "selected" array if($(this).hasClass("clicked")) { selected.push($(this).attr('id')); } // If toggleClass removed the class (ie: deselected the square) // we need to remove this item's id from the "selected" array else { // we get the position of $(this) item's 'id' that was previously pushed into the array var idx = selected.indexOf($(this).attr('id')); // we then remove it from the selected array with splice. selected.splice(idx,1); } // ... remainder of code }的状态，只需确保它们全部隐藏，然后再显示与单击按钮配对的那个。

（P.S。 - 如果您提供实际的HTML，我可以给您一个更准确的答案，但是，希望您可以从我发布的内容中找出答案。）

将多行var = false代码压缩到较少的行？

4 个答案: