jQueryを使用して複数のクラスを追加および削除する

Question

<div id="siteFeelingBannar" class="shadowVeryMild"> 
    <ul> 
     <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Annoyed</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Anxious</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Chatty</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Content</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Curious</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Ecstatic</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Excited</span></li> 
     <li><div class="autologinImage hidden"><span class="statusHover autologinMargin">Free</span></li> 
    </ul> 
</div> 

私は上記のコードをドロップダウンリストに表示し、人々が現在の気分を選択できるようにしています。

あなたが最初liに気づくでしょうが、残りの部分にわずかに異なっている：それはdiv.hiddenクラスを持っていないので、これは現在liを選択されている

<li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> 

（IMGを追加 - 選択したショーにダニ）とspan.autologinMarginクラスを持っていません（他のliアイテムには必要な間隔があり、すべてのラインナップが設定されています）。

私はこれを切り替えるためにjQueryを書こうとしています。 例：別のliをクリックした場合、div.hiddenが削除され、span.autologinMarginが削除され、以前に選択された2つのクラスが追加されます。

誰かが私にこのコードで正しい方向へのプッシュを与えることができますか？

Answer 1

これは動作するはずです。

$('#siteFeelingBannar li').click(function(){ 
    // Add the class to div and spans 
    $(this).siblings().find('div').addClass('hidden'); 
    $(this).siblings().find('span').addClass('autologinMargin'); 

    // Remove the classes from div and span. 
    $(this).find('div').removeClass('hidden'); 
    $(this).find('span').removeClass('autologinMargin'); 
}); 

Answer 2

あなたはすべての.autologinImage要素にクラスを追加して、このようなコードを使用して、要素のクリックから削除することができます

$("#siteFeelingBannar .autologinImage").click(function() { 
    $(this).closest("ul").find(".autologinImage").addClass("hidden"); 
    $(this).removeClass("hidden"); 
}); 

あなたは、それはここで働いて見ることができます：http://jsfiddle.net/jfriend00/ECrHP/

必要になりますあなたのHTMLの最初の<li>に入れ子の矛盾を<div>修正する必要もあります。 <span>は、他のすべてのものと似ているのではなく、<div>の内部にある必要があります。

autologinMarginクラスを動的に追加/削除する必要はありません。これは、親が隠されているかどうかに基づいてCSSだけでコントロールできるためです。実際には、おそらくそのクラスは必要ないでしょう。デフォルトのルールを設定し、.hiddenがそのルールよりも上の場合はそれを上書きするだけです。

あなたは李へのdivまでになりましたクラスを移動し、適切なCSSを調整するために喜んでいる場合は、コードがさらに簡単になります

$("#siteFeelingBannar li").click(function() { 
    $(this).removeClass("hidden").siblings().addClass("hidden"); 
}); 

Answer 3

あなたは、単にスイッチを試すことができますjqueryに組み込まれたクラスプロパティ。

$('.classname').hover(function(){ 
    $(this).stop(false, true).switchClass("classname"); 
}, function(){ 
    $(this).stop(false, true).switchClass("2ndclassname); 
}); 

例です。

Answer 4

以前の回答では、クラスがネストされた<div>であり、<li>ではないことに気づいていません。

$("#siteFeelingBannar li").click(function() { 
    $(this).find("div").removeClass("hidden").end().find("span").removeClass("autologinMargin"); 
    $(this).siblings().find("div")addClass("hidden").end().find("span").addClass("autologinMargin"); 
}); 

Answer 5

liにクラスを追加することによって、それを簡素化し、その後、子セレクタを使用してスタイル。

あなたがする必要があるのは、子孫要素ではなくliからクラスを追加/削除するだけです。

var lis = $('#siteFeelingBannar li').click(function() { 
    lis.not('.hidden').addClass('hidden'); 
    $(this).removeClass('hidden') 
}); 

---

<div id="siteFeelingBannar" class="shadowVeryMild"> 
<ul> 
    <li><div class="autologinImage"></div><span class="statusHover">Affectionate</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Annoyed</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Anxious</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Chatty</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Content</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Curious</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Ecstatic</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Excited</span></li> 
    <li class="hidden"><div class="autologinImage"><span class="statusHover">Free</span></li> 
</ul> 
</div> 

---

#siteFeelingBannar > ul > li { ... } 
#siteFeelingBannar > ul > li > div.autologinImage { ... } 
#siteFeelingBannar > ul > li > div.autologinImage > span.statusHover { ... } 

#siteFeelingBannar > ul > li.hidden { ... } 
#siteFeelingBannar > ul > li.hidden > div.autologinImage { ... } 
#siteFeelingBannar > ul > li.hidden > div.autologinImage > span.statusHover { ... } 

Answer 6

あなたが選択したliにクラスを追加することができ、selectedを言うことができます。次にそれを使用して選択したliを見つけ、適切なクラスをその子に追加できます。このような

何か：あなたが削除して、これらのクラスを追加する必要がないように、私はあなたのCSSを定義する代わりに検討する

$(".selected").find("autologinImage").addClass("hidden").end() 
       .find("statusHover").addClass("autologinMargin").end() 
       .removeClass("selected"); 

。このような何か：

.autologinMargin{ 
    visibility: hidden; 
} 

.selected .autologinMargin{ 
    visibility: visible; 
} 

また、画像はまだスペースを取るだろうので、visibilityを使用すると、あなたが着実にマージンを維持することができます。

Answer 7

ここにはworking exampleがあります。

$('#siteFeelingBannar li').on('click', function() { 
    if (!$(this).children('.autologinImage').hasClass('hidden')) { 
     // Do nothing 
    } else { 
     $('.autologinImage').not('hidden').addClass('hidden'); 
     $(this).find('div.autologinImage').removeClass('hidden'); 
    } 
});