根据活动类通过jquery替换部分类名

Question

我有一个包含三个 li 类的 ul 菜单：.1-is-on、.2-is-off、.3-is-off。

无论哪个 li 带有类 .active，都应显示类名称的“on”部分。默认情况下，在页面加载时，1-is-on 已分配给它 .active。当我点击 2-is-off .active 时，移动到 2-is-off 并留下 1-is-on，这很棒。

由于 .active 刚刚移动，我希望 .active 现在所在的 li 执行两件事： 1. 将“关”部分替换为“开” 2. 将兄弟 li 中的其他“on”替换为“off”

jQuery:

$(function() {    
$("ul.menu li").bind('click',function() {
   var xxx = $(this).siblings('li:not(.active)')
       if($(this).hasClass('active')) {
        $(this).attr("class",this.className.replace('off','on'));
        $(xxx).attr("class",xxx.className.replace('on','off'));
        }
});
});

HTML:

<ul class="menu">
    <li class="1-is-on active">1</li>
    <li class="2-is-off">2</li>
    <li class="3-is-off">3</li>
</ul>

我希望这只是我错过的一些小东西，但它让我发疯！

Answer 1

$("ul.menu li").click(function() {
    $(this).siblings().each(function() {
       this.className = this.className.replace("on", "off"); 
    });
    this.className = this.className.replace("off", "on");
    $(this).addClass("active").siblings().removeClass("active");
});

这会将被点击元素的所有同级元素的 on 替换为 off，然后将被点击元素的 off 替换为 on元素。然后，它将 active 类添加到单击的元素中，并将其从所有其他元素中删除。

您可以在此处查看此示例。

Answer 2

$(function() {    
    $("ul.menu li").bind('click',function() {
        // Do nothing if we're already active...
        if ($(this).hasClass('active')) return;

        // find the previously active element, remove active and remove "on"
        var previousOn = $(this).siblings('.active');
        previousOn.removeClass('active');
        previousOn.attr("class", previousOn.attr("class").replace("on", "off"));

        // Make the current element active
        $(this).addClass('active');
        // Replace "off" with "on" for this element
        this.className = this.className.replace('off','on');
    });
});