jquery - Jquery の最初のクリック addClass を選択 2 回目のクリック removeClass を選択

Question

4 つのオプションがあり、2 回目のクリックで複数のオプションを選択したり、選択したクラスを削除したりしたいと考えています。

Jクエリ

$('.contact-method li a').click(function(e) {
        $('.contact-method li a').removeClass('selected');
        $(this).parent('a').addClass('selected');
        e.preventDefault();
});

html

<ul class="contact-method">
<li class="sms"><a href="javascript:void(0);">SMS</a></li>
<li class="telephone"><a href="javascript:void(0);">Telephone</a></li>
<li class="email"><a href="javascript:void(0);">Email</a></li>
<li class="post"><a href="javascript:void(0);">Post</a></li>
</ul>

デモ http://jsfiddle.net/XeELs/97/

Answer 1

それ以外の

    $('.contact-method li a').removeClass('selected');
    $(this).parent('a').addClass('selected');

単に使用する

    $(this).toggleClass('selected');

Answer 2

アンカー ノードで選択したクラスを切り替えるだけの場合は、次のことを試してください。

$('.contact-method li a').click(function(e) {
    e.preventDefault();            
    $(this).toggleClass('selected');
});

http://jsfiddle.net/XeELs/99/

Answer 3

トグルクラスを使用する

$('.contact-method li a').click(function() {
        $(this).toggleClass('selected');
});

Answer 4

toggleClass メソッドを使用します。

$('.contact-method li a').click(function(e) {
    $(this).toggleClass('selected');
    e.preventDefault();
});

http://jsfiddle.net/XeELs/100/

http://api.jquery.com/toggleClass/