添加和删除多个类与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

回答

相关问题