如何使用jQuery：不是一次選擇多個元素

Question

我想使用jquery：not selector這樣一種方式，當一堆元素沒有指定的類時，我想在其中一個類中添加一個類。

我想要實現的是：'當design-preview1，design-preview2 design-preview 3和design-preview 4沒有“selected”類時，將“selected”類添加到“design-preview1”'。

我試過這個，但它不起作用：

   $(".design-preview1, .design-preview2, .design-preview3, .design-preview4").not(".selected").$(".design-preview1").addClass('selected');
    });

任何幫助將受到高度贊賞

新

這是我的完整jQuery代碼：

$('.pop-design1').click(function(){
            $(".design-preview li:not(.design-preview2).selected").removeClass('selected');
            $(".design-list li:not(.design-list2).selected").removeClass('selected');
            $(".design-preview2").toggleClass('selected');
            $(".design-list2").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design2').click(function(){
            $(".design-preview li:not(.design-preview3).selected").removeClass('selected');
            $(".design-list li:not(.design-list3).selected").removeClass('selected');
            $(".design-preview3").toggleClass('selected');
            $(".design-list3").toggleClass('selected');
            $(".overlay").toggle();
        });
        $('.pop-design3').click(function(){
            $(".design-preview li:not(.design-preview4).selected").removeClass('selected');
            $(".design-list li:not(.design-list4).selected").removeClass('selected');
            $(".design-preview4").toggleClass('selected');
            $(".design-list4").toggleClass('selected');
            $(".overlay").toggle();
        });
        if ($('.design-preview1, .design-preview2, .design-preview3, .design-preview4').not('.selected').length) {
    $('.design-preview1').addClass('selected');

基本上我想要的是當.design-preview1，.design-preview2，.design-preview3和.design-preview4未顯示或未被選中時，我希望.design-preview1默認顯示。
實時鏈接： http ： //www.expertfrontend.com/test/2.html

Answer 1

:not對於你想要做的事情來說， :not有點過於簡單，因為你需要改變多個元素的類，而不是以同樣的方式。 所以，你需要幾個步驟。 除此之外，您還需要使用.filter方法來確定您的任何標記是否具有selected類：

var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4",
    $group = $(group);

function doDefaultSelection() {
    if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4")
        .filter(".selected").length === 0) { // note use of .filter here
        $(".design-preview1").addClass('selected');
    }
}

doDefaultSelection();

$group.click(
    function() {
        $group.not(this).removeClass('selected');
        $(this).toggleClass('selected');
        doDefaultSelection();
    }
);

默認選擇器函數（ doDefaultSelection ）選擇具有指定類的所有元素，僅selected具有selected類的元素，並檢查是否有任何剩余元素。 如果沒有匹配的元素，則將selected類添加到.design-preview1元素中。

單擊處理程序將關閉除所單擊元素之外的所有內容的selected類，然后切換所單擊的類的類。 然后，如有必要，它會再次設置默認值。

演示

 var group = ".design-preview1, .design-preview2, .design-preview3, .design-preview4", $group = $(group); function doDefaultSelection() { if ($(".design-preview1, .design-preview2, .design-preview3, .design-preview4") .filter(".selected").length === 0) { $(".design-preview1").addClass('selected'); } } doDefaultSelection(); $group.click( function() { $group.not(this).removeClass('selected'); $(this).toggleClass('selected'); doDefaultSelection(); } ); 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p class="design-preview1">blah</p> <p class="design-preview2">blah</p> <p class="design-preview3">blah</p> <p class="design-preview4">blah</p> 

Answer 2

我想要實現的是：當design-preview1，design-preview2 design-preview 3和design-preview 4沒有“selected”類時，將“selected”類添加到“design-preview1”

根據你的問題的要求，你說你想用.not()來實現這個目的。 以下是通過addSelectedClassIfNotExists()函數執行此操作的方法。

您還可以重構單擊偵聽器，因此您只能運行一個已定義的函數。 以下是在建議的更改后，您的問題中修改后的代碼可能如下所示：

var previews = $('.design-preview1, .design-preview2, .design-preview3, .design-preview4');

function addSelectedClassIfNotExists() {
    if (previews.not('.selected').length === previews.length) {
        $('.design-preview1').addClass('selected');
    }
}

function toggleClasses(num) {
    $('.design-preview li:not(.design-preview' + num + ').selected').removeClass('selected');
    $('.design-list li:not(.design-list' + num + ').selected').removeClass('selected');
    $('.design-preview' + num).toggleClass('selected');
    $('.design-list' + num).toggleClass('selected');
    $('.overlay').toggle();
}

previews.click(function () {
    toggleClasses(this.className.slice(-1));
    addSelectedClassIfNotExists();
});

Answer 3

如果要檢查它們是否都沒有selected類，則可以使用if條件並將類添加到design-preview1

if (!$(".design-preview1, .design-preview2, .design-preview3, .design-preview4").hasClass('selected')) {
    $(".design-preview1").addClass('selected');
}

---

如果你想檢查是否所有人都有班級

if($(".design-preview1, .design-preview2, .design-preview3, .design-preview4").not('.selected').length){
    $(".design-preview1").addClass('selected');
}

Answer 4

你可以使用not選擇器：

var elements = $("p[class^='design-preview']");
elements.each(function(para, i){
if(!$(para).hasClass('selected'))
{
   $(para).addClass('selected');
}
});

我在這里做的是首先選擇給定類的所有para元素。 之后，我在返回元素數組上應用循環，並檢查當前元素是否具有selected類。 如果它沒有所選的類我們添加其他我們不添加。

希望這個邏輯有所幫助