javascript - 当使用 jquery 甚至纯 javascript 检查 3 个或更多复选框时，如何过滤 div 列表？

Question

基于我以前的问题，我想根据特定 div 元素的存在，通过不同的组合过滤 div 列表。

在下面的示例中，我使用 3 个复选框“Card”、“Paypal”、“Show only open stores”来过滤列表。现在它适用于“卡”和“贝宝”复选框，但如果您尝试检查“仅显示开放商店”复选框，它就会搞砸。我该如何解决？

这是代码：

var checkboxArea = document.querySelector('.filter-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var byOpen = document.getElementById('by-open')

var cardBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.card-available')
})

var payPalBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.paypal-available')
})

var openStoreBlocks = storeBlocks.filter(function(block) {
  return block.querySelector('.close-small-tag')
})

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

    case byOpen.checked:
      openStoreBlocks.forEach(function(block) {
        block.classList.toggle('hide-me')
      })
      break



    default:
      payPalBlocks.concat(cardBlocks).forEach(function(block) {
        block.classList.remove('hide-me')
      })
  }
})

.close-small-tag,
.open-small-tag {
  position: absolute;
  left: 130px;
  top: 5px;
  font-size: 11px;
  font-weight: bold;
  color: brown;
}

.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;
}

.filter-area {
  margin-bottom: 20px;
  overflow: hidden;
}

.inputRadioGroup {
  float: left;
  margin-right: 20px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

<div class="filter-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 class=" inputRadioGroup">
    <input type="checkbox" id="by-open">
    <label for="by-open">SHOW ONLY OPEN STORES</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="open-small-tag">OPEN</div>
    <div class="minorder">100 €&lt;/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="open-small-tag">OPEN</div>
    <div class="minorder">250 €&lt;/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="close-small-tag">CLOSE</div>
    <div class="minorder">25 €&lt;/div>
    <div class="store-payment-options">
      <div class="card-available">CARD</div>
    </div>
  </div>

  <div class="store-block">
    <div class="store-name">Linux Store</div>
    <div class="rating">&bigstar; 4.9</div>
    <div class="close-small-tag">CLOSE</div>
    <div class="minorder">50 €&lt;/div>
    <div class="store-payment-options">
      <div class="paypal-available">PAYPAL</div>
    </div>
  </div>



</div>

标签： javascriptjqueryhtmlcss