Question

我有一个列表，当选择一个链接时，div的关联将隐藏。

首先，是否有更简单的方法来编写代码以使选择器找到与按下的按钮相关联的数据？

其次，当选择多个链接并再次单击一个链接时，列表将恢复为默认值。有没有解决这个问题？

    $(document).ready(function() {

        $('#show-free').click(function() {

            if ($('#show-free').hasClass('active')) {
                $('.book[data-price!="0"]').trigger('show')
                $(this).removeClass('active');

            } else {
                $('.book[data-price!="0"]').trigger('hide');
                $(this).addClass('active');
            }
        });

        $('#show-paid').click(function() {

            if ($('#show-paid').hasClass('active')) {
                $('.book[data-price="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-price="0"]').trigger('hide');
                $(this).addClass('active');
            }
        });

        $('#show-new').click(function() {

            if ($('#show-new').hasClass('active')) {
                $('.book[data-weeks-on-list="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-weeks-on-list="0"]').trigger('hide')
                $(this).addClass('active');
            }
        });


        $('#show-old').click(function() {

            if ($('#show-old').hasClass('active')) {
                $('.book[data-weeks-on-list!="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-weeks-on-list!="0"]').trigger('hide')
                $(this).addClass('active');
            }
        });


        $('.book').on('show', function() {
            $(this).show('slow');
        }).on('hide', function() {
            $(this).hide('slow');
        })


    });

Answer 1

为了便于查找与链接相关的数据，请使用data（）JQuery方法

$('.book').filter(function(obj){
   return obj.data('price') != '0';
}

而不是

$('.book[data-price!="0"]')

实际上是更好的 - 我怀疑不是。这只是另一种选择。

使用单击函数 - 因为您没有在方法中返回false，然后将触发链接的默认行为，我想这会导致链接重置。我会尝试在点击中返回false以阻止此行为。

这有帮助吗？

jQuery，使用链接和数据选择器过滤列表

1 个答案: