Question

我有两个单独运行的jQuery函数。下面的功能A显示所有，完整，不完整的项目取决于选择，它工作正常。功能B根据它们所属的类别（选项）显示项目。

我现在想要将两者结合起来，以便过滤器以这种方式工作。用户选择功能B并选择该选项，然后用户可以进一步优化，仅在所选选项中查看所有项目，已完成或不完整的项目。

功能A：

$('.sort').click(function(){
        var _t=$(this);
        $('.sort').removeClass('active');
        $(this).addClass('active');
        if(_t.hasClass('showall')){
            $('li.todo').show();
        }else if(_t.hasClass('complete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.uncheck_box').length;
            }).hide();
        }else if(_t.hasClass('incomplete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.check_box').length;
            }).hide();
        }

    });

功能B（下拉列表）：

$('.itemage').change(function(){
        var select_val=$(this).val();
        if($(this).val()=='10'){
            $('li.todo').show();
        }else{
            $('li.todo').hide();
            $('li.todo').filter(function(){
                if($(this).attr('itemage')==select_val)
                    return true;
                else
                    return false;
            }).show();
        }
    });

Answer 1

你可以使用trigger()方法触发当前处理程序中另一个事件的处理程序，另一个选项是组合2个处理程序并监听click事件，如果我已正确理解了这个问题像以下应该工作：

$('.sort, .itemage').on('click', function (e) {
    var $this = $(this).hasClass('sort') 
                ? $(this).addClass('active') 
                : $('.sort.active');

    var itemage = $('.itemage').val(),
        b = itemage == 10;

    $('.sort').not($this).removeClass('active');

    if ($this.hasClass('showall')) {
        $('li.todo').hide().filter(function () {
            return (this.getAttribute('itemage') === itemage || b);
        }).show();
        return;
    }

    var sel = $this.hasClass('incomplete') 
              ? 'span.uncheck_box'
              : 'span.check_box';

    $('li.todo').hide().filter(function () {
        return (this.getAttribute('itemage') === itemage || b) 
               && !! $(this).find(sel).length;
    }).show();
});

http://jsfiddle.net/m5GWz/

Answer 2

我使用“showall”和“完整”示例更新了您code，将class="complete"更改为data-stat="complete"以简化检测我们需要的内容。

还有许多其他方法对此过滤器样式更有用，但如果您只有两个选项，这也很容易使用。

在jQuery中进行多重过滤和排序

2 个答案: