如果选中此复选框，则在单击时从div中删除类 [英] if checkbox is checked remove class from div on click

问题描述

早上发布了关于同一项目的问题.战斗了一段时间后，想出了一些不同的方法. 试图建立一个过滤器.想法是，过滤器复选框具有与已过滤项类匹配的ID.因此，单击过滤器项后，将过滤应用于项类.类(除ind​​item之外)和id是动态的

Posted a question on about the same project in the morning. After battling it for a while came up with a bit different approach. Trying to build a filter. And the idea is that a filter checkboxes have matching id's with filtered items classes. So, once a filter item clicked, filtration is applied to item class. Classes (except for inditem) and ids are dynamic

它的简化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');
    });
  }

});

此标记为重要的标记，在将多余的项目添加到过滤条件时不要隐藏

and this one marked as important not to be hidden when extra items are added into filtration

.checkeditem {display:block !important}

初始过滤效果很好.但是，当我单击选中的项目时，关联的div不会隐藏.

Initial filtration works fine. But when I click on checked item the associated div does not hide.

推荐答案

您的意思是

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>

这篇关于如果选中此复选框，则在单击时从div中删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！