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

Posted 2023-03-16

【中文标题】根据活动类通过jquery替换部分类名

【英文标题】：Replace part of class name via jquery based on active class

【发布时间】：2011-09-30 18:32:03

【问题描述】：

我有一个包含三个 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>

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

【参考方案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的例子。

【讨论】：

像魅力一样工作！感谢您的帮助詹姆斯

【参考方案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');
    );
);

【讨论】：

您在以previousOn.attr(... 开头的行缺少右括号和分号（以及一些其他分号）。

@james 谢谢你。分号是 meh（可选），但括号不是！