1

我想添加/删除三个 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>
4

4 回答 4

2

我会稍微改变你的 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/

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

于 2012-10-06T07:06:29.910 回答
1
  1. 在您的 jsfiddle 中，您选择了mootools库。
  2. 在该ready方法中，您将嵌套所有单击操作。
  3. 如果您删除一个类，则必须检索要删除的类名。

解决这个问题（并通过将脚本放在页面底部来消除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

于 2012-10-06T07:17:02.623 回答
0

您使用了错误的绑定

$('.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"));

    }
于 2012-10-06T07:06:03.670 回答
0

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

您当前的代码

$('.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');
    });
于 2012-10-06T07:04:32.390 回答