如果所有元素都有给定的类，如何将一个类添加到元素中？

-1

我有几个div类.toCheck。如果所有元素都有给定的类，如何将一个类添加到元素中？

通过点击这些div之一，我增加了点击的div类.readyToSend

我也有一个按钮，“#send”，每一次我点击.toCheck格，如果所有.toCheck divs拥有类.readyToSend我想将类“.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(

年底前完成

什么应该是最好的方法来完成我想要做的？

来源

2015-04-29 woshitom

该事件处理程序的代码都不是异步的，所以它会正常工作。我建议你至少将'addClassButton'变量改为布尔值。 –

并非所有的JavaScript是异步的。

但是，这是简单得多：

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

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

在那里，我们增加或删除类ready（我以为你意味着加引号）的基础上是否有与任何元素没有类readyToSend的类toCheck。

的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>

来源

2015-04-29 08:33:32

切换课程可能不是必需的，因为我们在添加课程时并未从课程中删除课程 –

@ArunPJohny：确实，但很方便。并且*通常*对于这些类型的事情，再次单击“toCheck”将会取消选择它们，但是在OP的场景中不会（如您所指出的那样）。 –

您可以使用一个简单的选择.toCheck:not(.readyToSend)将返回其不具有readyToSend类

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

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

演示任何toCheck元素：Fiddle

来源

2015-04-29 08:33:04

如果所有元素都有给定的类，如何将一个类添加到元素中？

回答

相关问题