2016-04-08 17 views
-1

Bir düğmeye tıkladığımda, bir sınıfı kaldırmak ve diğeriyle değiştirmek istiyorum.Jquery sınıfı kaldırın ve yenisiyle değiştirin

<div class="mainDiv-34"> 
    <div class="row one red"></div> 
    <div class="row two red"></div> 
    <div class="row three red"></div> 
</div> 

Ne yapmak istediğim class="row two green" tarafından class="row two red" yerini alacak, ancak satır iki yeşil yerine benim mainDiv-34 yanında addded edilir: aşağıdaki html içeriği var! Niye ya ?

$('.mainDiv-34').removeClass("row two red").addClass("row two green"); 
+0

Sen ebeveyni değil çocuk –

+0

hedefliyoruz 'satır iki red' o _three_ sınıflar olduğunu, burada _one_ sınıf değildir. İlk ikisini kaldırmak, sadece onları tekrar eklemek, saçmadır. Sadece kırmızıyı kaldır ve 'yeşil' ekle. – CBroe

cevap

0

$('.mainDiv-34') üst düzey div seçme anlamına gelir:

İşte benim JS var.

Sen artık şöyle bir şey yapmak gerekir: Doğru div seçerek değildir

$('.row.one.red').removeClass("row one red").addClass("row one green"); 
0

.

Eğer/kaldırma üst div sınıflar ekliyoruz da ondan
$('.mainDiv-34 div.row.two.red').removeClass("row two red").addClass("row two green"); 
0
$('.mainDiv-34').find('div.two').removeClass("red").addClass("green"); 
+0

Sadece bir kod dizisinden çıkmak yerine bir açıklama eklediğinizden emin olun. – Huey

0

, üst div .mainDiv-34 için

$(".mainDiv-34").find(".row.two").removeClass("red").addClass("green") 
0

Kişisel selektör noktalarını deneyin. Çocuk elemanlarını hedeflemelisin.

Senaryo 1: Sınıfı, .mainDiv-34 içinde belirli bir öğe üzerinde değiştirin.

$('.mainDiv-34 div.row.two').removeClass('red').addClass('green'); 

Senaryo 2: sınıfa row ile .mainDiv-34 içindeki tüm unsurları sınıfını değiştirin.

$('.mainDiv-34 div.row').removeClass('red').addClass('green'); 

Senaryo 3: sınıf row ile .mainDiv-34 içinde tüm unsurları mafsallı sınıfı.

$('.mainDiv-34 div.row').click(function() 
{ 
    $(this).toggleClass('red green'); 
}); 

Örnek: https://jsfiddle.net/DinoMyte/r3yuyapk/