单击并使用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');
});

（见左侧菜单）

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

Answer 3

你可以将你的小提琴设置为Mootools，就像有人说上面将它转换为jQuery会让它发挥作用。

工作示例：

http://jsfiddle.net/rbUjx/