使用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与其他的略有不同：

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

这是当前选定的li，因为它没有div.hidden类（添加一个图像-勾来显示已选择），也没有span.autologinMargin类（给其他li项提供所需间距，以便它们都对齐）。

我一直在尝试编写jQuery代码来实现此切换。例如：如果有人点击不同的li，则这个li将删除div.hidden和span.autologinMargin，而之前选择的li将添加这两个类。

请问有人能帮我指导一下这段代码吗？

- Adam

Answer 1

简化它，通过向

添加class，并使用子选择器进行样式设置。

这样，您只需要从

中添加/删除class，而不是后代元素。

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 { ... }

- user1106925

---

类没有被添加或从span中移除。 - Virendra

@Virendra：请阅读整个答案。 - user1106925

嗨@AdamRackis。总之，我回来了一小会儿。 :) - user1106925

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上的类移动到li上并相应地调整CSS，则代码可以更简单：

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

- jfriend00

---

这不会向 span 添加或删除类。 - Virendra

@Virendra - 它会添加和删除现有的“hidden”类所在的 div 中的内容。我们假设这是 OP 希望添加/删除的内容。可以完全删除 autologinMargin 类，并完全使用 CSS 处理该问题。 - jfriend00

Answer 3

早期的回答没有注意到类是嵌套在一个<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");
});

- Interrobang

---

这不会向 span 添加或删除类。 - Virendra

Answer 4

你可以尝试使用jQuery内置的switch类属性。

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

这是一个例子。

- Gabriel Rivera

---

switchClass 是 jQueryUI 的一部分，而不是 jQuery 核心。 - Andrew Whitaker

Answer 5

您可以为选定的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将使您保持边距稳定，因为图像仍将占用空间。

- James Montagne

Answer 6

这应该可以工作。

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

- Virendra

Answer 7

这里有一个工作样例。

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

- Josh Smith