Question

我有一个包含4个div的列表，我使用2个复选框通过特定div的存在来过滤列表。筛选工作完美，直到我选中两个复选框。

如您在下面的代码中看到的，如果您尝试同时选中“卡”和“贝宝”复选框，该列表将消失。相反，我需要显示所有4格。我如何使它以这种方式工作？

代码如下：

   pk,model,codename,name,content_type
   22,auth.permission,add_logentry,Can add log entry,8
   23,auth.permission,change_logentry,Can change log entry,8

$("#by-card").change(function() {
  $('.store-block .store-payment-options').each(function() {
    if ($(this).find('.card-available').length === 0) {
      $(this).parent(".store-block").toggleClass('hide-me');
    }
  });
});



$("#by-paypal").change(function() {
  $('.store-block .store-payment-options').each(function() {
    if ($(this).find('.paypal-available').length === 0) {
      $(this).parent(".store-block").toggleClass('hide-me');
    }
  });
});

.search-area {
  margin-bottom: 10px;
}

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;
}

.paypal-available,
.card-available {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

Answer 1

要获得该行为，您需要更改您拥有的代码：

您需要为change和paypal的复选框提供一个card功能
然后，每当选中/取消选中任何一个复选框时，您都可以循环这两个复选框，以了解是否选中了其中的任何一个。如果您选中了此复选框，则显示类别为store-block的元素，其中我还添加了与单击的id的{{1}}值相同的另一个类。
使用该类值，可以轻松确定属于特定复选框的div集。
您还需要管理在选中所有复选框之后都将其取消选中的情况，为此，我使用了变量checkbox。

oneChecked

$(".inputRadioGroup input[type='checkbox']").change(function() {
  var oneChecked = false;
  $(".inputRadioGroup input[type='checkbox']").each(function(){
    var checked = this.checked;
    var checkedId = $(this).attr('id');
    if(checked){
      oneChecked = true;
      $('.'+checkedId).show();
    } else {
      $('.'+checkedId).hide();
    }
  });
  if(!oneChecked){
    $('.store-block').show();
  }
});

.search-area {
  margin-bottom: 10px;
}

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;
}

.paypal-available,
.card-available {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

Answer 2

我不擅长jQuery，但这是我使用良好的老式纯Javascript解决此问题的方法。您方法的主要变化是，在两个复选框的父元素上监听change事件（而不是在具有单独处理程序的每个复选框上监听），然后检查是否已选中或两者或未选中复选框，并相应地创建适当的DOM状态：

var checkboxArea = document.querySelector('.checkboxes-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')

var cardBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.card-available')
})

var payPalBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.paypal-available')
})

checkboxArea.addEventListener('change', function(e) {
  switch (true) {
    case byCard.checked && byPaypal.checked:
      storeBlocks.forEach(function(block) { block.classList.remove('hide-me') })
      break
    case byCard.checked:
      cardBlocks.forEach(function(block) { block.classList.remove('hide-me') })
      payPalBlocks.forEach(function(block) { block.classList.add('hide-me') })
      break
    case byPaypal.checked:
      cardBlocks.forEach(function(block) { block.classList.add('hide-me') })
      payPalBlocks.forEach(function(block) { block.classList.remove('hide-me') })
      break  
    default:
      payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') })
  }
})

.search-area {
  margin-bottom: 10px;
}

.storesList {
  margin-top: 20px;
}

#count {
  display: inline-block;
}

.store-block {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  background: #e5e5e5;
  position: relative;
  overflow: hidden;
}

.rating {
  position: absolute;
  right: 70px;
  top: 3px;
}

.minorder {
  position: absolute;
  right: 180px;
  top: 3px;
}

.paypal-available,
.card-available {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: blue;
}

.right {
  float: right;
}

.left {
  float: left;
}

.hide-me {
  display: none;
}

.checkbox-lab {
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

<div class="checkboxes-area">
  <div class="inputRadioGroup">
    <input type="checkbox" id="by-card">
    <label for="by-card">Card</label>
  </div>

  <div class="inputRadioGroup">
    <input type="checkbox" id="by-paypal">
    <label for="by-paypal">Paypal</label>
  </div>
</div>

<div class="storesList">
  <div class="store-block">
    <div class="store-name">Apple Store</div>
    <div class="rating">&bigstar; 4.5</div>
    <div class="minorder">100 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Nokia Store</div>
    <div class="rating">&bigstar; 3.8</div>
    <div class="minorder">250 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Samsung Store</div>
    <div class="rating">&bigstar; 4.0</div>
    <div class="minorder">25 €</div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="minorder">50 €</div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>
</div>

使用jquery或javascript选中2个复选框后，如何过滤div列表？

2 个答案: