javascript - jquery搜索结果过滤

Question

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

我在这里为它创建了一个小提琴http://jsfiddle.net/LEZAh/

有效的方法：检查一个框并具有相应的元素显示，当检查另一个框时，将其添加到允许的框中显示。

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

抱歉解释不好，但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

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

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

Answer 3

我已经简化了你的点击功能。

$(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();  
      }
   });
});​

这假设您的结果都将位于同一个包装器中，并且您的复选框也将全部位于同一包装器中。

链接到更新的 jsFiddle