jQuery 在循环中递增选择器名称

Question

我有 class deal1 到 deal6。对于这些 classes，我想在循环中构建一个点击函数并增加选择器中的 class 名称，但不知何故它不起作用。

这是我的代码：

var deal = [];
var x = 0;

for (x = 1; x <= 6; x++) {
    deal[x] = jQuery('.deal' + x).click(function(){
        jQuery('.deal' + x).toggleClass('open');        
    });
    console.log(deal[1,2], 'x');
};

有人可以帮我做吗？

Answer 1

试试这个：

var deal = [];

for (let x = 1; x <= 6; x++) {
    var element = $('.deal' + x);
    element.on('click', function(e){
        $(this).toggleClass('open');
    });

});

你能告诉我们你为什么想要这个数组吗？

Answer 2

问题是点击事件发生在循环结束后，因此 'x' 的值不再是循环中的值。

例如，当 x 为 3 时，它会向 .deal3 添加一个事件，但是当它被单击时，x 现在 = 6，因此它会切换 .deal6。

这就是您可以在事件处理程序中使用 this 的原因。

var x = 0;

for (x = 1; x <= 6; x++) {
    jQuery('.deal' + x).click(function(){
        jQuery(this).toggleClass('open');        
    }); 
};

在您单击作为子元素的按钮的情况下，您仍然使用 this，但现在 this 是按钮，因此使用 .closest() 来查找相关容器：

var x = 0; 
for (x = 1; x <= 6; x++) { 
    jQuery('.deal' + x + ' .iw-so-media-box').click(function(){ 
        jQuery(this).closest(".deal").toggleClass('open'); 
    }); 
}

在这种情况下，我会添加第二个 class（如上所示），使您的 html 为：

<div class='deal deal1'>
  <div>deal 1</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>

但是，如果您已经这样做了，那么只需完全摆脱循环并将您的事件处理程序添加到 .deal:

jQuery('.deal .iw-so-media-box').click(function() {
  jQuery(this).closest(".deal").toggleClass('open');
});

.deal>div {
  display: none;
}

.deal.open>div {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='deal deal1'>
  <div>deal 1</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>
<div class='deal deal2'>
  <div>deal 2</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>
<div class='deal deal3'>
  <div>deal 3</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>

Answer 3

试试这个例子：

$(function() {
  var selector = $.map(new Array(6), function(_, i) {
    return '.deal' + (1 + i);
  }).join(',');
  console.log(selector);
  $(selector).on('click', function() {
    $(this).toggleClass('open');
  });
});

.open {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal1'>Deal 1</li>
  <li class='deal2'>Deal 2</li>
  <li class='deal3'>Deal 3</li>
  <li class='deal4'>Deal 4</li>
  <li class='deal5'>Deal 5</li>
  <li class='deal6'>Deal 6</li>
</ul>

$(function() {
  $('[class*=deal]').on('click', function() {
    $(this).toggleClass('open');
  });
});

.open {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal1'>Deal 1</li>
  <li class='deal2'>Deal 2</li>
  <li class='deal3'>Deal 3</li>
  <li class='deal4'>Deal 4</li>
  <li class='deal5'>Deal 5</li>
  <li class='deal6'>Deal 6</li>
</ul>

$(function() {
  $('.deal').on('click', function() {
    $(this).toggleClass('open');
  });
});

.open {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal'>Deal 1</li>
  <li class='deal'>Deal 2</li>
  <li class='deal'>Deal 3</li>
  <li class='deal'>Deal 4</li>
  <li class='deal'>Deal 5</li>
  <li class='deal'>Deal 6</li>
</ul>

Answer 4

如果你不想使用for循环，你可以像下面这样使用。此代码段将起作用。

$('[class*="deal"]').on("click", function() {
    $('[class*="deal"]').slice(0, 6).toggleClass('open')         
})

jQuery 在循环中递增选择器名称

jQuery increment selector name in a loop

jquery

selector