javascript循环用相应的按钮类号关闭div

Question

我希望类名为"x-1“的按钮为类名为"popup-1”的div提供一个"none“的显示属性。当点击时，"x-2“会给div”弹出-2“显示"none”。我尝试过这样做，当我按"x-1“时，它会将”无“显示为”弹出-2“，而不是”弹出-1“。

​

$(document).ready(function(){
   var xCount = 2;
   for (i = 0; i < xCount; i++) {
      $('.x-'+i).click(function(){
         $('.popup-'+i).css('display','none');
      });
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="x-1">Hide popup-1</button>
<button class="x-2">Hide popup-2</button>

<div class="popup-1">popup-1</div>
<div class="popup-2">popup-2</div>

​

Answer 1

您的循环在全局范围内定义了i变量。因此，当您单击按钮时，i已经变了--最好用let关键字来定义i，以避免闭包问题。这是您的代码的更正。

​

$(document).ready(function() {
  var xCount = 2;
  for (let i = 1; i <= xCount; i++) {
    $('.x-' + i).click(function() {
      $('.popup-' + i).css('display', 'none');
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="x-1">Hide popup-1</button>
<button class="x-2">Hide popup-2</button>

<div class="popup-1">popup-1</div>
<div class="popup-2">popup-2</div>

​

Answer 2

首先，在循环中添加单击事件并不是很好的实践。

现在，回答您的问题，您有两个按钮添加，点击id分隔与逗号。这是你可以尝试的东西。

$('.x-1,.x-2').click(function(){
var className = this.className;
  if(className === 'x-1')
  {
  ... do something ....
  }
  else
  {
  ... do something ....
  }
});