javascript - 单击并使用 add/removeClass 更改标题的类

Question

我试图让用户在 1-4 个选项之间单击。他们可以选择一个或全部 4 个。

这是jsfiddle。

<a class="selector" href="#"><h2 class="unselected">Option 1</h2></a>
<a class="selector" href="#"><h2 class="unselected">Option 2</h2></a>
<a class="selector" href="#"><h2 class="unselected">Option 3</h2></a>
<a class="selector" href="#"><h2 class="unselected">Option 4</h2></a>

$("a.selector").click(function(){
    $(this).children("h2").removeClass('unselected').addClass('selected');
});

这是一个简单的，但我无法得到它。我究竟做错了什么？

Answer 1

只要将 jQuery 添加到小提琴中，它就可以工作：http: //jsfiddle.net/CjCM4/

无需更改代码：

$("a").click(function(){
    $(this).children("h2").removeClass('unselected').addClass('selected');
});

​</p>

（见左侧菜单）

Answer 2

我只是在 jsfiddle 上更新你的代码

/*​$('a.selector').on('click', function(){
   $(this).children("h2").removeClass('unselected').addClass('selected');
});​​​​​​​​​​​​​​​​*/

$('a.selector').on('click', function(){
   $(this).children("h2").toggleClass('selected');
});

​</p>

Answer 3

你把你的小提琴设置为 Mootools 就像上面有人说的那样，把它切换到 jQuery 会让它工作。

工作示例：

http://jsfiddle.net/rbUjx/