Question

所以我发现for循环（i ++）方法仅适用于我的项目中的某些情况，这是它不起作用的情况之一。我从来不知道它为什么不起作用，仍然无法找到答案。

我希望周围的人可以帮助我，因为这开始给我带来麻烦。无论我们是使用jQuery还是使用vanilla JS，只要我能解决这个问题。

我做了一个非常小的jFiddle，真正的代码更大，并且在这里和那里使用ajax调用但是它几乎相同，我通常需要使用以下（js脚本）INSIDE ajax成功，但我使用的东西喜欢＆＃34; nearest.find（＆＃39; .example）＆＃34;相反，由于某种原因，我想停止使用该方法。

https://jsfiddle.net/un12bjq3/1/

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
button {
  padding: 10px 10px 10px 10px;
  background-color: midnightblue;
  border: 0;
  border-radius: 10px;
  color: white;
  font-size: 22px;
  cursor: pointer;
}

.container,
.container_ {
  display: table;
  font-size: 20px;
  color: black;
  border: 1px solid black;
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
}

.border_div {
  float: left;
  display: table;
  padding: 10px 30px 10px 30px;
  border-radius: 10px;
  border: 1px solid black;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}


</style>
</head>
<body>

<div class="border_div">
  <h2>
With eq(i)..<br>Not working
</h2>
  <button class="btn">
    Btn 1
  </button>

  <div class="container">
    Container 1
  </div>

  <br>
  <br>

  <button class="btn">
    Btn 2
  </button>

  <div class="container">
    Container 2
  </div>

</div>







<div class="border_div">
  <h2>
Without eq(i)<br>It only works with<br>a real number
</h2>
  <button class="btn_">
    Btn 1
  </button>

  <div class="container_">
    Container 1
  </div>

  <br>
  <br>

  <button class="btn_">
    Btn 2
  </button>

  <div class="container_">
    Container 2
  </div>

</div>




<script>

for (var i = 0; i < 5; i++) {
  $('.btn').eq(i).click(function() {
    $('.container').eq(i).toggle();
  });
}



// How can I auto detect the eq() index ?
// This is a working example with eq(0)
$('.btn_').eq(0).click(function() {
  $('.container_').eq(0).toggle();
});
</script>




</body>
</html>

非常感谢！

Answer 1

您需要使用let代替var

for (let i = 0; i < 5; i++) {
  $('.btn').eq(i).click(function() {
    $('.container').eq(i).toggle();
  });
}

使用var时，变量i在循环的所有迭代之间共享。然后，当执行事件处理程序时，它将具有值5。

使用let时，每次循环迭代都会有一个新变量i，因此每个事件都使用正确的i值。

您实际上可以使用更简单的代码：

for (let i = 0; i < 5; i++) {
    $('.btn').eq(i).click(function() {
            $(this).toggle();
    });
}

jQuery确保this引用事件处理程序中的正确元素。

Answer 2

使用.index：https://api.jquery.com/index/

$('.btn').click(function() {
    var index = $(".btn").index (this);   
    $('.container').eq(index).toggle();
 });

为什么这个jQuery eq（i）不工作？

2 个答案: