Question

我正在尝试使用复选框作为过滤条件元素并隐藏相应的<li>元素来创建javascript过滤器：

以下是我的搜索过滤器的示例：

<input type=[checkbox] class="filter" data-city="Memphis">
<input type=[checkbox] class="filter" data-city="Cordova">
<input type=[checkbox] class="filter" data-city="Bartlett">

以下是我的结果：

<li class="result" data-city="Memphis">Memphis</li>
<li class="result" data-city="Memphis">Memphis</li>
<li class="result" data-city="Cordova">Cordova</li>
<li class="result" data-city="Bartlett">Bartlett</li>

这是我的javascript，它不像我想要的那样工作：

$('.filter').change(function(){
    var city = $(this).data("city");
    if($(this).is(":checked")){
        $('li.result').is('[data-city="'+city+'"]').show();
        $('li.result').not('[data-city="'+city+'"]').hide();
    }
    else{
        $('li.result').not('[data-city="'+city'"]').show();
    }
});

我最终得到一个类似切换的结果。如何将其检查到每个输入的位置，显示与其对应的li，并隐藏其他输入？当他们变得不受控制时也取消隐藏。

Answer 1

在每个复选框上单击，您可以查找相应的项目和复选框以确定可见性。

由于您希望在未选中任何内容时显示所有内容，并且仅在检查某些内容时过滤掉结果，因此在该特定情况的处理程序末尾会放置其他逻辑。

Fiddle

$('.filter').change(function(){     
    //on each click, refresh visible / hidden for each item
    $('li.result').each(function(i, item){
      var city = $(this).data('city');
      var visible = $('input.filter[data-city="' + city + '"]:checked').length > 0;
      visible ? $(this).show() : $(this).hide();
    });

    //if no checkboxes are checked, show everything
    if($('input.filter:checked').length === 0) $('li.result').show();
});

在复选框中添加了一些标签，以便于测试。

<input type="checkbox" class="filter" data-city="Memphis"> memphis
<input type="checkbox" class="filter" data-city="Cordova"> cordova
<input type="checkbox" class="filter" data-city="Bartlett"> bartlett

<ul>
<li class="result" data-city="Memphis">Memphis</li>
<li class="result" data-city="Memphis">Memphis</li>
<li class="result" data-city="Cordova">Cordova</li>
<li class="result" data-city="Bartlett">Bartlett</li>
</ul>

Answer 2

从未选中的复选框开始，列表可见。检查一个，其他人隐藏。检查另一个显示。取消选中一个隐藏的，但已检查的项目仍会显示。

jQuery('.filter').change(function(){
  var city = $(this).data("city");
  if(jQuery(this).is(":checked")){
    jQuery('li.result[data-city="'+city+'"]').show();
    jQuery('.filter').each(function (key, value) {
      if ( jQuery(value).is(':not(:checked)') ) {
        jQuery('li.result[data-city="'+jQuery(value).attr('data-city')+'"]:not(:checked)').hide();
      }
    });
  }
  else{
    jQuery('li.result[data-city="'+city+'"]').hide();
  }
});

<input type=checkbox class="filter" data-city="Memphis">Memphis
<input type=checkbox class="filter" data-city="Cordova">Cordova
<input type=checkbox class="filter" data-city="Bartlett">Bartlett
<ul>
  <li class="result" data-city="Memphis">Memphis</li>
  <li class="result" data-city="Cordova">Cordova</li>
  <li class="result" data-city="Bartlett">Bartlett</li>
</ul>

JSBin example

带有复选框和li的jQuery过滤器

2 个答案: