Question

我想添加/删除三个css类加上一个默认类。示例：当我单击第一个锚点时，它会添加一个名为style1的新类并删除默认样式，当我单击第二个锚点时，它会删除style1并添加style2，而对于anchor3则相同。

问题是，如果我从单击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>

Answer 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/

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

Answer 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

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

Answer 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"));

    }

添加和删除多个类

4 个答案:

添加和删​​除多个类

4 个答案:

添加和删除多个类