Come usare jQuery: non selettore per più di un elemento alla volta

Question

Voglio usare jquery: non selettore in modo tale che quando un gruppo di elementi non ha una classe specificata, quindi voglio aggiungere una lezione per uno di loro.

Quello che voglio ottenere è: 'quando design-preview1, design-preview2 design-preview 3 e design-preview 4 non hanno la classe "selected", aggiungi classe "selected" a "design-preview1" '.

Ho provato questo ma non funziona:

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

Qualsiasi aiuto sarebbe molto apprezzato

Nuova

Questo è il mio codice jQuery completo:

$('.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'); 

Fondamentalmente quello che voglio è che quando .design-preview1, .design-preview2, .design-preview3 e .design-preview4 non vengono visualizzati o non sono selezionati, voglio .design-preview1 per mostrare di default.
collegamento in diretta: http://www.expertfrontend.com/test/2.html

Answer 1

Quello che voglio ottenere è: quando il design-preview1, design-Preview2 design anteprima 3 e design-preview 4 non hanno la classe "selezionato", aggiungi class "selezionate" a "design- preview1 "

Come richiesto nella domanda, hai detto di voler utilizzare .not() per raggiungere questo obiettivo. Di seguito è riportato un modo per farlo tramite la funzione addSelectedClassIfNotExists().

È anche possibile eseguire il refactoring dei listener di clic, pertanto è possibile eseguire solo una funzione definita. Qui di seguito è ciò che il codice modificato dalla tua domanda potrebbe apparire come dopo le modifiche suggerite:

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 2

Se si vuole verificare se nessuno di loro ha la classe selected quindi è possibile utilizzare una condizione if e aggiungere la classe di design-preview1

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

---

Se si desidera verificare se tutti hanno la classe allora

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

Answer 3

:not è un po 'troppo semplice per quello che si sta cercando di fare, come avete bisogno di cambiare la classe di molteplici elementi, e non tutti allo stesso modo. Quindi, avrai bisogno di alcuni passaggi. Tra le altre cose, è necessario utilizzare il metodo .filter per determinare se uno qualsiasi dei vostri tag hanno la classe 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(); 
    } 
); 

La funzione di selezione di default (doDefaultSelection) seleziona tutti gli elementi con i tuoi rami definiti, raccoglie unici che hanno la classe selected e controlla se ce ne sono ancora.Se non ci sono elementi corrispondenti, aggiunge la classe selected agli elementi .design-preview1.

Il gestore dei clic disattiva la classe selected per tutto tranne l'elemento su cui si fa clic, quindi attiva la classe per quella su cui si è fatto clic. Quindi imposta di nuovo l'impostazione predefinita, se necessario.

Demo

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 4

È possibile utilizzare la non selettore di qualcosa di simile:

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

Quello che sto facendo qui è la selezione in primo luogo tutti gli elementi para con la data classe. Successivamente, applico il ciclo sull'array degli elementi restituiti e controlla se l'elemento corrente ha la classe selected. Se non ha la classe selezionata, aggiungiamo altro che non aggiungeremo.

Spero che questa logica aiuti.