jQuery |单击添加 anchor 并添加/删除类

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

添加 anchor 有效，单击添加类有效 - 我只是不明白为什么当用户第二次单击 anchor 时，单击添加的“选定”类不会删除？

因此，当用户单击 anchor “show-instances”时，“selected”类将添加到 anchor - 我需要在再次单击该类时将其删除。

我是否缺少其他功能？

有什么建议吗？

/******已解决* ******/

使用 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)A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the switch as arguments. switchA boolean value to determine whether the class should be added or removed.

虽然这看起来非常简单，但如果您将这些类型的问题发布到 jsfiddle 上也会有所帮助。这样人们就可以看到您想要实现的目标。