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类（添加了一个img - tick来显示所选）并且它没有li类（为其他li项提供一些必要的间距，以便它们所有阵容都设置。

我一直在尝试编写jQuery来允许它切换。例如：如果有人点击其他div.hidden，那么这个已移除span.autologinMargin并移除{{1}}，之前选择的那个已添加了这两个类。

有人可以通过此代码帮助我推动正确的方向。

Answer 1

通过将类添加到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 2

您可以使用这样的代码将类添加到所有.autologinImage元素中，然后将其从单击元素中删除：

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

您可以在此处查看：http://jsfiddle.net/jfriend00/ECrHP/

您还必须在HTML中的第一个<div>修复<li>嵌套不一致问题。 <span>应该在<div>内，而不是像所有其他内容一样。

无需动态添加/删除autologinMargin类，因为您可以根据父级是否隐藏来仅控制CSS。事实上，你可能甚至不需要那门课。只需设置一个默认规则，并覆盖如果.hidden位于其上方。

如果您愿意将现在在div上的类移动到li并适当调整CSS，那么代码可以更简单：

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

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");
});

Answer 4

您可以简单地尝试内置于jquery中的switch类属性。

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

是一个例子。

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将允许您保持边距稳定，因为图像仍将占用空间。

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

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

添加＆amp;使用jQuery删除多个类

7 个答案: