Question

早上就同一个项目发表了一个问题。经过一段时间的战斗后，想出了一个不同的方法。试图建立一个过滤器。并且想法是过滤器复选框具有与过滤的项类匹配的id。因此，单击过滤器项后，将对项类进行过滤。类（inditem除外）和ids是动态的

简化的HTML

<div class="itemswrap">
  <div class="inditem dynamic1"></div>
  <div class="inditem dynamic2"></div>
  <div class="inditem dynamic3"></div>
  <div class="inditem dynamic2"></div>
</div>

<ul class="subnav">
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic1" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic2" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic3" />
    <label for="dynamic1">whatever label</label>
  </li>
</ul>

JS

$(".lifilter").each(function() {
  var filter1 = $(this).find('.filtercheck').attr('id');

  if ( $(this).find('.filtercheck').attr('checked') ) {
    $(this).find('.filtercheck').click(function(){
      $('.' + filter1).removeClass('checkeditem').hide();
    });
  }
  else 
  {
    $(this).find('.filtercheck').click(function(){
      $('.inditem').hide();
      $('.' + filter1).addClass('checkeditem');
    });
  }

});

这个标记为重要的是当额外的项目被添加到过滤中时不被隐藏

.checkeditem {display:block !important}

初始过滤工作正常。但是当我点击选中的项目时，关联的div不会隐藏。

Answer 1

你的意思是

var $filters = $('.filtercheck').change(function() {
  var $items = $('.inditem').hide();
  var filters = $filters.filter(':checked').map(function() {
    return '.' + this.id;
  }).get();
  if (filters.length) {
    $items.filter(filters.join()).show();
  } else {
    $items.show();
  }
});

.checkeditem {
  display: block !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="itemswrap">
  <div class="inditem dynamic1">dynamic1</div>
  <div class="inditem dynamic2">dynamic2</div>
  <div class="inditem dynamic3">dynamic3</div>
  <div class="inditem dynamic2">dynamic2</div>
</div>
<ul class="subnav">
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic1" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic2" />
    <label for="dynamic1">whatever label</label>
  </li>
  <li class="lifilter">
    <input type="checkbox" class="filtercheck" id="dynamic3" />
    <label for="dynamic1">whatever label</label>
  </li>
</ul>

Answer 2

代码的问题在于事件处理程序在第一个成功案例上附加了第二个单击事件。这意味着复选框上的“单击”被赋予“addclass”大小写，并且所有后续点击都由该处理程序而不是预期的处理程序处理。

使用相同的HTML。我创造了这个：

$(document).ready(function() {
  $(".filtercheck").click(function(){
    $('.inditem').hide();
    var filter1 = $(this).attr('id');

    $('.' + filter1).toggleClass('checkeditem');
  });
});

我认为这是预期的行为？我没有单独附加点击处理程序，而只是将一个处理程序附加到所有这些处理程序。做一些像

这样的事情会相当容易

$(this).prop()

确定当前点击的项目是否处于活动状态。对于这个简单的例子，我选择使用类切换来说明这一点。

如果选中复选框，则在单击时从div中删除class

2 个答案: