jquery - JQuery | アンカーを追加し、クリックでクラスを追加/削除

Question

これが私のjqueryです：

// Show all instances
    var link = $('<a class="show-instances" href="#">Show all instances</a>');

    $('tr.main').hide().first().find('.product').parent().remove('a').append(link);
    $('tr.main').first().show();

    $(function () {
        $(".show-instances").click(function (e) {
            e.preventDefault();
            $(".show-instances").addClass('selected').not(this).removeClass('selected');
            var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
            $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
            return false;
        })
    });

アンカーの追加が機能し、クリックでクラスの追加が機能します-ユーザーが2回目にアンカーをクリックしたときに、クリックして「選択」されたクラスが削除されない理由がわかりませんか?

したがって、ユーザーがアンカー「show-instances」をクリックすると、「選択された」クラスがアンカーに追加されます。もう一度クリックすると、クラスを削除する必要があります。

別の機能がありませんか？

助言がありますか？

/ * ** * **解決済み* ** * ** * /

Toggle クラスの使用 - jquery は次のとおりです。

// Show all instances
    var link = $('<a class="show-instances" href="#">Show all instances</a>');

    $('tr.main').hide().first().find('.product').parent().remove('a').append(link);
    $('tr.main').first().show();

    $(function () {
        $(".show-instances").click(function (e) {
            e.preventDefault();
            $(this).toggleClass("selected");
            var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
            $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
            return false;
        })
    });

また、ここにJsfiddleのリンクがあります

Answer 1

あなたが説明していることに基づいて、おそらくtoggleClass関数がうまく機能するでしょう。

API ドキュメントから:

.toggleClass( function(index, class, switch) [, switch] ) function(index, class, switch)一致したセットの各要素の class 属性で切り替えられるクラス名を返す関数。セット内の要素のインデックス位置、古いクラス値、およびスイッチを引数として受け取ります。switchクラスを追加または削除するかどうかを決定するブール値。

これは非常に簡単に思えますが、これらのタイプの質問をjsfiddleに投稿して、達成しようとしていることを他の人が確認できるようにすることも役立ちます。

Answer 2

クラスを削除して追加toggleClass()する代わりに試しましたか?