如果所有元素都有給定的類，如何將一個類添加到元素中？

-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

如果所有元素都有給定的類，如何將一個類添加到元素中？

回答

相關問題