Question

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

这是我的代码：

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

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

例如，当x为3时，它会向.deal3添加一个事件，但是当它被点击时，x now = 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'); 
    }); 
}

在这种情况下，我会添加第二个类（如上所示），将你的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增量选择器名称

4 个答案: