点击时使用 toggleClass - jQuery答案

【问题标题】：Using toggleClass on click - jQuery点击时使用 toggleClass - jQuery
【发布时间】：2013-12-09 01:33:45
【问题描述】：

我对 jQuery 很陌生。

我有两个菜单选项卡，并试图让选项卡“a”在单击时使用选项卡“b”切换（切换）类。

使用 .attr 方法似乎不起作用。我也试过用 toggleClass 切换它，但还是没有。

// toggle between login / register
$(".static-color").click(function() {
    $("#login").hide(); 
    $("#register").show();

    $(this).attr("active-color");
    $(".active-color").attr("static-color");

});

// toggle between login / register
$(".active-color").click(function() {
    $("#login").show();
    $("#register").hide();

    $(this).attr("static-color");
    $(".static-color").attr("active-color");
});

http://jsfiddle.net/h3Y6G/

【问题讨论】：

jsfiddle.net/h3Y6G/6我更新了；切换类；如果您可以使用 id 登录并注册 s，那将很容易。这也有效。添加行 while $(".active-color").removeClass("active-color").addClass("static-color"); $(this).removeClass("static-color").addClass("active-color");切换。

标签： jquery toggleclass

【解决方案1】：

您实际上对.attr 所做的只是获取不存在的假定static-colorattribute 的值。

诀窍是使用.addClass .removeClass 或在本例中为.toggleClass。

我给你的另一个提示是使用带有.on jQuery 方法的事件委托。这将允许更灵活的事件处理。您实际上是将侦听器附加到父元素，该元素将侦听来自与指定选择器匹配的另一个元素的事件，如下所示：

$("#login-register").on('click', '.static-color', function() {
    $('.active-color, .static-color').toggleClass("active-color static-color");
    $("#login, #register").toggle();
});

另外，我看到你有一些重复，试着让你的代码更可重用。 Don't Repeat Yourself!

我更新了你的小提琴：http://jsfiddle.net/h3Y6G/1/

【讨论】：

【解决方案2】：

我的建议是使用button 类作为切换类的选择器，并删除static 类。你可以假设如果你的按钮不是“活动的”，那么它就会隐含地是“静态的”，你应该相应地设置它们的样式。

试试这个：

$('.button').click(function() {
    // remove active class from all buttons
    $('.button').removeClass('active-color');
    // add it to the current clicked button
    $(this).addClass('active-color');
    // get button type and deal with content accordingly
    var button_type = $(this).text().trim();
    if(button_type == "Register") {
        $("#register").show();   
        $("#login").hide();
    } else if(button_type == "Log-In") {
        $("#login").show();
        $("#register").hide();
    }
});

JSFiddle：http://jsfiddle.net/h3Y6G/2/

【讨论】：

【解决方案3】：

“active-color”不是属性。

您的意思是切换 CSS 或类吗？

$(this).attr("active-color");

变成

$(this).addClass('active-color').removeClass('static-color');

或者反转它，只需切换类的名称：

$(this).addClass('static-color').removeClass('active-color');

【讨论】：

和其他按钮...？