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

添加锚点工作并点击添加类工作 - 我只是不明白为什么单击添加的类“选中”将不会在用户第二次点击锚点时删除？

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

我错过了另一个功能吗？

有什么建议吗？

/ * ** * ** 分辨的 * 的** * ** * /

使用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）一个返回类名的函数在匹配集中的每个元素的class属性中切换。接收集合中元素的索引位置，即旧类 value，以及作为参数的开关。 switchA布尔值来确定是否应该添加或删除该类。

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

Answer 2

您是否尝试过toggleClass()而不是删除和添加类？

JQuery |添加锚点并在点击时添加/删除类

2 个答案: