如果所有元素都有给定的 class，如何向元素添加 class？

Question

我有几个 div class .toCheck。

通过单击其中一个 div，我将向单击的 div 添加 class .readyToSend

我还有一个按钮“#send”，每次我点击 .toCheck div，如果所有 .toCheck div 都有class .readyToSend 我想将 class “.ready” 添加到“#send”。

我在想这段代码：

$(document).on('click', '.toCheck', function() {
   $(this).addClass(readyToSend);

   var addClassButton = 'yes';

   $('.toCheck').each(function(){
      if(!$(this).hasClass('readyToSend')){
         addClassButton = 'no';
      }
   });

   if(addClassButton == 'yes'){
     $('#send').addClass(ready);
   }
});

但由于JavaScript是异步的，恐怕测试：

if(addClassButton == 'yes')

将在

结束前完成

$('.toCheck').each(

完成我想做的事情的最佳方法应该是什么？

Answer 1

您可以使用一个简单的选择器 .toCheck:not(.readyToSend)，它将 return 任何没有 readyToSend class

的 toCheck 元素

$(document).on('click', '.toCheck', function () {
    $(this).addClass('readyToSend');

    if ($('.toCheck:not(.readyToSend)').length == 0) {
        $('#send').addClass('ready');
    }
});

演示：Fiddle

Answer 2

不是所有 JavaScript是异步的。

但这可以简单得多：

$(document).on('click', '.toCheck', function() {
   $(this).addClass('readyToSend'); // Quotes here, right?

   $("#send").toggleClass('ready', $(".toCheck:not(.readyToSend)").length ? false : true);
});

在那里，我们根据是否有任何带有 class toCheck 没有 class readyToSend.

toggleClass也可以是：

   $("#send").toggleClass('ready', !$(".toCheck:not(.readyToSend)").length);

...但我认为从上面的条件开始会更清楚。

实例:

$(document).on('click', '.toCheck', function() {
   $(this).addClass('readyToSend'); // Quotes here, right?

   $("#send").toggleClass('ready', !$(".toCheck:not(.readyToSend)").length);
});

.toCheck {
  cursor: pointer;
}
.readyToSend {
  color: green;
}
.ready {
  color: green;
}

<div class="toCheck">Click me</div>
<div class="toCheck">Click me</div>
<div class="toCheck">Click me</div>
<div class="toCheck">Click me</div>
<div class="toCheck">Click me</div>
<div id="send">Send</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果所有元素都有给定的 class，如何向元素添加 class？

How to add a class to an element if all elements have a given class?

each

jquery

addclass