添加和刪除多個類與jQuery

<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>

我上面這段代碼，給出了一個下拉列表，使人們可以選擇自己當前的感受。添加和刪除多個類與jQuery

你會注意到的第一件li是剩下的略有不同：

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

這是當前選擇的li，因爲它不具備div.hidden類（增加了IMG - 剔顯示選定的）和它沒有span.autologinMargin類（給其他li項目一些需要的間距，所以他們所有陣容）設置。

我一直在嘗試寫jQuery來允許切換。例如：如果有人點擊不同的li，那麼這個人刪除div.hidden，刪除span.autologinMargin，並且之前選擇的人添加了這2個類。

有人可以幫助給我一個正確的方向與此代碼推。

來源

2011-12-29 Adam

這應該工作。

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

來源

2011-12-29 03:57:44 Virendra

您可以使用這樣的代碼，增加了全班所有.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"); 
});

來源

2011-12-29 03:51:02 jfriend00

這不會在span中添加和刪除類。 – Virendra 2011-12-29 04:02:53

@Virendra - 它增加和刪除現有的「隱藏」類的div。我們假設這是OP想要添加/刪除的內容。 autologinMargin類可以完全移除，並且該問題完全由CSS處理。 – jfriend00 2011-12-29 04:04:06

您可以簡單地嘗試開關class屬性內置到jquery中。

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

就是一個例子。

來源

2011-12-29 03:51:39

'switchClass'是jQueryUI的一部分，而不是jQuery核心。 – 2011-12-29 03:54:57

早期的答案並沒有注意到這些類是嵌套的<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"); 
});

來源

2011-12-29 03:53:13 Interrobang

這不會在跨度中添加和刪除類。 – Virendra 2011-12-29 03:59:28

教我不滾動，編輯。 – Interrobang 2011-12-29 04:01:21

通過將類添加到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 { ... }

來源

2011-12-29 03:53:29

該死的，一個很好的答案，我可以完成打字我的。 XD – James 2011-12-29 03:56:40

啊 - 你回來了:) – 2011-12-29 04:02:45

類沒有得到添加或刪除/從跨度。 – Virendra 2011-12-29 04:03:38

你可以一類添加到選定的li，可以說selected。然後，您可以使用它來查找所選的li，併爲其子項添加適當的類。

事情是這樣的：

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

我會考慮，而不是定義你的CSS，使您不必刪除和添加這些類。事情是這樣的：

.autologinMargin{ 
    visibility: hidden; 
} 

.selected .autologinMargin{ 
    visibility: visible; 
}

此外，使用visibility可以讓你保持利潤率穩定，因爲圖像仍然會佔用空間。

來源

2011-12-29 03:53:55

這是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'); 
    } 
});

來源

2011-12-29 04:01:47

添加和刪除多個類與jQuery

回答

相關問題