Jak używać jQuery: nie selektor dla więcej niż jednego elementu na raz

Question

Chcę użyć jquery: nie selektora w taki sposób, że gdy grono elementów nie ma określonej klasy, to chcę dodać klasa do jednego z nich.

Co chcę osiągnąć to: "kiedy podgląd projektu 1, podgląd projektu 2 podgląd projektu 3 i podgląd projektu 4 nie mają klasy" wybrany ", dodaj klasę" wybrano "do" podgląd projektu-1 " ".

próbowałem tego, ale to nie działa:

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

Każda pomoc będzie bardzo mile widziane

Nowość

To mój pełny kod 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'); 

Zasadniczo to, czego chcę, to to, że gdy .design-preview1, .design-preview2, .design-preview3 i .design-preview4 nie są wyświetlane lub nie są wybrane, domyślnie powinienem wyświetlać .design-preview1.
żywo Link: http://www.expertfrontend.com/test/2.html

Answer 1

Co chcę osiągnąć jest: kiedy projekt-preview1, design-preview2 design-preview 3 i design-podgląd 4 nie mają klasę "wybrany", dodać klasę "wybrany" na „Design preview1 "

Zgodnie z twoim pytaniem, powiedziałeś, że chcesz użyć .not(), aby to osiągnąć. Poniżej znajduje się sposób, w jaki można to zrobić za pomocą funkcji addSelectedClassIfNotExists().

Można także refaktoryzować nasłuchiwaczy kliknięć, więc uruchamiasz tylko jedną zdefiniowaną funkcję. Poniżej jest to, co zmodyfikowany kod z pytaniem mógłby wyglądać po proponowanych zmian:

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

Jeśli chcesz sprawdzić, czy żaden z nich nie ma klasę selected następnie można użyć warunku if i dodać klasę do design-preview1

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

---

Jeśli chcesz sprawdzić, czy wszystkie mają klasę, to

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

Answer 3

:not jest trochę zbyt proste za to, co staramy się robić, co trzeba zmienić klasę wielu elementów, a nie w taki sam sposób. Będziesz potrzebować kilku kroków. Między innymi, trzeba użyć metody .filter celu ustalenia, czy któryś z tagów mieć klasę 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(); 
    } 
); 

Funkcja selektor domyślna (doDefaultSelection) wybiera wszystkie elementy ze swoimi wyznaczonych klas, wybiera tylko te, które mają klasa selected i sprawdza, czy zostały jeszcze jakieś.Jeśli nie ma pasujących elementów, dodaje klasę selected do elementu (-ów) .design-preview1.

Klasyfikacja kliknięć wyłącza klasę selected dla wszystkiego oprócz klikniętego elementu, a następnie przełącza klasę dla tej, którą kliknięto. Następnie w razie potrzeby ustawia ponownie wartość domyślną.

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

można użyć nie selektora coś takiego:

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

co robię tutaj wybierając najpierw wszystkie elementy para z danym klasa. Następnie stosuję pętlę w tablicy zwróconych elementów i sprawdzam, czy bieżący element ma klasę selected. Jeśli nie ma wybranej klasy, którą dodamy, nie dodajemy.

Mam nadzieję, że ta logika pomaga.