Question

我用php / sphinx / jquery建立一个搜索引擎，除了过滤搜索结果外，我的大部分都在工作。搜索结果不是过滤器提交的，而是显示所有结果然后我尝试使用jquery在单击复选框时隐藏不匹配的结果。

什么有效：选中一个框并显示相应的元素，当选中另一个框时，将其添加到允许显示的框中。

什么行不通：当您选中多个复选框并取消选中其中一个复选框时，相应的元素不会显示。

对不起的解释感到抱歉，但是fillde将会自发地表示感谢！

Answer 1

正如上面的优秀帖子（mrtsherman，ahren）的补充，你的else语句的最后一行引起了问题。一个快速而肮脏的解决方案是：

    //$(".ni-search"+checks).show(); //this was the offending line

    $("#cat_"+$(this).attr('id')).hide(); //instead of showing everything just hide what was clicked

我也成功地在你的小提琴中运行了这个。

Answer 2

我简化了点击功能。

$(document).ready( function () {
   $('.search-option input').click(function(){
      var inputs = $(".search-option input");
      var products = $(".ni-search");

      products.each(function(i){
         if(inputs.eq(i).is(":checked")){
            $(this).show();
         }else{
            $(this).hide();
         }
      });
      if(products.length == inputs.not(":checked").length){
          products.show();  
      }
   });
});

这假设您的结果都在同一个包装器中，并且您的复选框也都在同一个包装器中。

Link to updated jsFiddle

Answer 3

这是您脚本的另一个简化版本。

http://jsfiddle.net/LEZAh/4/

$('input').change(function() {
    //all checkboxes are unchecked, so show all
    if ($('input:checked').length == 0) {
        $('.ni-search').show();
    }
    else {
        //otherwise only show checked
        $('.ni-search').hide();
        $('input:checked').each(function(index) {
            $('.ni-search').eq(index).show();
        });
    }
});

jquery搜索结果过滤

3 个答案: