时间戳

首页 > 解决方案 > 用 eq() 或 index 得到不同的结果

javascript - 用 eq() 或 index 得到不同的结果

问题描述

我试图按按钮的顺序仅显示相应的元素，当我单击某个按钮时，它只显示一个元素并隐藏其他元素，我必须这样做，我有 3 个元素，当我按下第一个“ eq (0)" 它显示第一个但也显示最后一个，当我按下第二个 "eq (1)" 它也显示第二个但也显示最后一个，当我按下最后一个 "eq (2)" 它显示什么它应该，它显示自己（最后一个）！有什么问题？

$(".button").click(function(event) { 
     event.stopImmediatePropagation();
     var index = $(".button").index(this);
     $(".div-to-show").eq(index).css('display','block');
     $(".div-to-show").eq(!index).css('display','none');
 });

标签： javascriptjquery

解决方案

使用.eq()和.not()与您创建的索引的示例。

$(function() {
  $(".button").click(function(event) {
    event.stopImmediatePropagation();
    var index = $(".button").index(this);
    console.log(index);
    $(".div-to-show").not(":eq(" + index + ")").hide();
    $(".div-to-show").eq(index).show();
  });
});
.div-to-show {
  padding: 10px;
  margin: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.button {
  padding: 4px;
  margin: 3px;
  border: 1px solid #222;
  border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div-to-show">
  Div 0
</div>
<span class="button">Toggle</span>
<div class="div-to-show">
  Div 1
</div>
<span class="button">Toggle</span>
<div class="div-to-show">
  Div 2
</div>
<span class="button">Toggle</span>
<div class="div-to-show">
  Div 3
</div>
<span class="button">Toggle</span>

参考：

希望有帮助。

推荐阅读