根据活动类通过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.将“off”部分替换为“on” 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 类添加到单击的元素中，并将其从所有其他元素中删除。

你可以看到这个here的例子。

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