添加和删除多个类答案

【问题标题】：Adding and Removing Multiple Classes添加和删除多个类
【发布时间】：2012-10-06 17:33:02
【问题描述】：

我想添加/删除三个 CSS 类和一个默认类。示例：当我单击第一个锚点时，它会添加一个名为 style1 的新类并删除默认样式，当我单击第二个锚点时，它会删除 style1 并添加 style2，锚点3 也是如此。

问题是，如果我从点击 anchor3 开始，什么都没有发生，我无法撤消操作。

无论我先点击哪个链接，如何才能使添加/删除类正常工作？我需要使用这三种样式，但还需要一个默认样式。

这是 JFiddle 上的代码：http://jsfiddle.net/VadUE/2/

它在浏览器中有效，但在 JFiddle 上无效。

代码：

$(document).ready(function() {
    $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
        $('.anchor2').click(function() {
            $('p').addClass('style2').removeClass('style1');
            $('.anchor3').click(function() {
                $('p').addClass('style3').removeClass('style2');
            });
        });
    });
});


<style type="text/css">
.style1{
    color: #FF8000;
}
.style2{
    color: #F36;
}

.style3{
    color: #00F;
}

.default{
    color: #0C0;
}
</style>


<a class="anchor1" href="#/">Link1</a>
<a class="anchor2" href="#/">Link2</a>
<a class="anchor3" href="#/">Link3</a>
<p class="default">This is a sequence into a sound</p>

【问题讨论】：

为什么要嵌套事件绑定？

标签： javascript jquery

【解决方案1】：

我会稍微修改一下你的 HTML：

<a class="anchor" href="#/">Link1</a>
<a class="anchor" href="#/">Link2</a>
<a class="anchor" href="#/">Link3</a>

然后只需使用这个简单的 JS 代码：

$(document).ready(function() {
    $('.anchor').click(function() {
        $('p').attr('class', 'style' + ($(this).index() + 1));
    });
});

演示：http://jsfiddle.net/VadUE/4/

您的原始代码的问题在于您奇怪地绑定了事件处理程序（一个仅在触发另一个事件处理程序后才绑定）。您想将它们一一绑定。

【讨论】：

【解决方案2】：

在您的 jsfiddle 中，您选择了 mootools 库。
在ready 方法中，您嵌套所有点击动作。
如果您删除一个类，则必须检索要删除的类名。

解决这个问题（并通过将脚本放在页面底部来消除对ready 调用的需要），您最终会得到：

$('.anchor1').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style1');
});
$('.anchor2').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('.anchor3').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});

见jsfiddle

对链接使用单个 className 并添加数字 id，您只需要一个处理程序：

$('.anchor').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style'+this.id);
});

见jsfiddle

【讨论】：

谢谢，现在我希望我知道如何添加 cookie 以使此操作保持不变。我会再发一个帖子。再次感谢！

【解决方案3】：

问题是您正在从第一个点击处理程序内部绑定第二个和第三个链接的点击处理程序。这意味着您的第二个和第三个链接只有在您点击第一个链接后才会开始工作。

您当前的代码

$('.anchor1').click(function() {
    $('p').addClass('style1').removeClass('default');
    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
        $('.anchor3').click(function() {
            $('p').addClass('style3').removeClass('style2');
        });
    });
});

应该改为

   $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
    });

    $('.anchor2').click(function() {
        $('p').addClass('style2').removeClass('style1');
    });

    $('.anchor3').click(function() {
        $('p').addClass('style3').removeClass('style2');
    });

【讨论】：

是的，我注意到了，但我该如何解决这个问题？

【解决方案4】：

你使用了错误的绑定

$('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');

}


$('.anchor2').click(function() {
        $('p').addClass('style1').removeClass('style1');

}

或者你可以使用

 $('a[class^=anchor]').click(function() {
            $('p').addClass('style'+this.id).removeClass($(this).attr("class"));

    }

【讨论】：