时间戳

首页 > 解决方案 > 产品过滤器 - 根据选中/取消选中的多个复选框显示结果

javascript - 产品过滤器 - 根据选中/取消选中的多个复选框显示结果

问题描述

我正在构建一个产品过滤器，以根据分辨率、响应时间、品牌等规格缩小显示器选择范围。

我为每个结果创建了 div，规格是类。

每个复选框都有一个 value 属性。选中后，此属性存储在地图对象中。这样当我取消选择一个复选框时，它就会从地图对象中删除，反之亦然。

地图对象的结果用“.”连接在一起。之间，然后存储在变量assignTo中，这会被记录下来，这样你就可以看到哪些被选中了。

我现在的问题是如何显示包含存储在 assignmentTo 中的类的所有div？

我试过使用document.querySelectorAll，然后通过显示块循环遍历它，但有两个问题：

  1. 我收到“未捕获的 SyntaxError：无法在 'Document' 上执行 'querySelectorAll'：'...' 不是有效的选择器”
  2. 如果我成功循环并显示每个结果，如果我取消选中一个框，我如何让该结果消失？

$(document).ready(function() {
  $(':checkbox[type="checkbox"]').on('change', function() {
    var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function() {
        return $(this).attr('value');
      })
      .get().join(".");
    console.log(assignedTo);
    document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block")
  });
});
.result {
  width: 100%;
  border: 1px solid black;
  padding: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
  float: left;
  font-size: 11px;
  color: #000;
  font-family: sans-serif;
  display: none;
}

div.results {
  width: 70%;
  display: inline;
  float: left;
  position: relative;
  padding-right: 10%;
}

div#filters {
  width: 20%;
  display: inline;
  float: left;
  position: relative;
}

.btn {
  background-color: #0077ce;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  position: relative;
  float: right;
}

.btn:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <h1>Find your monitor</h1>
  <div id="filters">
    <h3>Recommended For</h3>
    <ul class="recommended">
      <li>
        <input type="checkbox" value="home" id="filter-home" />
        <label for="filter-home">Home</label>
      </li>
      <li>
        <input type="checkbox" value="office" id="filter-office" />
        <label for="filter-office">Office</label>
      </li>
      <li>
        <input type="checkbox" value="gaming" id="filter-gaming" />
        <label for="filter-gaming">Gaming</label>
      </li>
    </ul>
    <h3>Size</h3>
    <ul class="-monitor-size">
      <li>
        <input type="checkbox" value="24inch" id="filter-24inch" />
        <label for="filter-24inch">24inch</label>
      </li>
      <li>
        <input type="checkbox" value="32inch" id="filter-32inch" />
        <label for="filter-32inch">32inch</label>
      </li>
      <li>
        <input type="checkbox" value="40inch" id="filter-40inch" />
        <label for="filter-40inch">40inch</label>
      </li>
    </ul>
    <h3>Resolution</h3>
    <ul class="monitor-resolution">
      <li>
        <input type="checkbox" value="1080p" id="filter-1080p" />
        <label for="filter-1080p">1080p</label>
      </li>
      <li>
        <input type="checkbox" value="4K" id="filter-4K" />
        <label for="filter-4K">4K</label>
      </li>
      <li>
        <input type="checkbox" value="5K" id="filter-5K" />
        <label for="filter-5K">5K</label>
      </li>
    </ul>
    <h3>Response Time</h3>
    <ul class="monitor-responsetime">
      <li>
        <input type="checkbox" value="1ms" id="filter-1ms" />
        <label for="filter-1ms">1ms</label>
      </li>
      <li>
        <input type="checkbox" value="5ms" id="filter-5ms" />
        <label for="filter-5ms">5ms</label>
      </li>
      <li>
        <input type="checkbox" value="10ms" id="filter-10ms" />
        <label for="filter-10ms">10ms</label>
      </li>

    </ul>
    <h3>Brand</h3>
    <ul class="monitor-brand">
      <li>
        <input type="checkbox" value="branda" id="filter-branda" />
        <label for="filter-branda">Brand A</label>
      </li>
      <li>
        <input type="checkbox" value="brandb" id="filter-brandb" />
        <label for="filter-brandb">Brand B</label>
      </li>
      <li>
        <input type="checkbox" value="brandc" id="filter-brandc" />
        <label for="filter-brandc">Brand C</label>
      </li>
      <li>
        <input type="checkbox" class="brandd" id="filter-brandd" />
        <label for="filter-brandd">Brand D</label>
      </li>
      <li>
        <input type="checkbox" value="brande" id="filter-brande" />
        <label for="filter-brande">Brand E</label>
      </li>
      <li>
        <input type="checkbox" value="brandf" id="filter-brandf" />
        <label for="filter-brandf">Brand F</label>
      </li>

    </ul>
  </div>
  <div class="results">
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>


    <div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
  </div>
</body>

</html>

标签： javascripthtmljquerycheckboxfilter

解决方案

  1. querySelector以数字开头的选择器有问题。如果您在下面的代码中转义第一个数字，则可以使用选择器r.replace(/^(\d)/, '\\3' + '$1 ')。
  2. 由于您在选择器中循环，您可以在显示结果之前隐藏所有元素。在下面的代码中，document.querySelectorAll('div.result').forEach(div => div.style.display = "none");就在循环之前。

我还添加了一个条件，以防未选择任何内容。在您的代码中，它导致了一个错误。

$(document).ready(function() {
  $(':checkbox[type="checkbox"]').on('change', function() {
    var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function() {
    let r = $(this).attr('value');
    r = r.replace(/^(\d)/, '\\3' + '$1 ');
        return r;
      })
      .get().join(".");
    console.log(assignedTo);
    document.querySelectorAll('div.result').forEach(div => div.style.display = "none");
    if (assignedTo !== ""){
    document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block");
    }
  });
});
.result {
  width: 100%;
  border: 1px solid black;
  padding: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
  float: left;
  font-size: 11px;
  color: #000;
  font-family: sans-serif;
  display: none;
}

div.results {
  width: 70%;
  display: inline;
  float: left;
  position: relative;
  padding-right: 10%;
}

div#filters {
  width: 20%;
  display: inline;
  float: left;
  position: relative;
}

.btn {
  background-color: #0077ce;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  position: relative;
  float: right;
}

.btn:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <h1>Find your monitor</h1>
  <div id="filters">
    <h3>Recommended For</h3>
    <ul class="recommended">
      <li>
        <input type="checkbox" value="home" id="filter-home" />
        <label for="filter-home">Home</label>
      </li>
      <li>
        <input type="checkbox" value="office" id="filter-office" />
        <label for="filter-office">Office</label>
      </li>
      <li>
        <input type="checkbox" value="gaming" id="filter-gaming" />
        <label for="filter-gaming">Gaming</label>
      </li>
    </ul>
    <h3>Size</h3>
    <ul class="-monitor-size">
      <li>
        <input type="checkbox" value="24inch" id="filter-24inch" />
        <label for="filter-24inch">24inch</label>
      </li>
      <li>
        <input type="checkbox" value="32inch" id="filter-32inch" />
        <label for="filter-32inch">32inch</label>
      </li>
      <li>
        <input type="checkbox" value="40inch" id="filter-40inch" />
        <label for="filter-40inch">40inch</label>
      </li>
    </ul>
    <h3>Resolution</h3>
    <ul class="monitor-resolution">
      <li>
        <input type="checkbox" value="1080p" id="filter-1080p" />
        <label for="filter-1080p">1080p</label>
      </li>
      <li>
        <input type="checkbox" value="4K" id="filter-4K" />
        <label for="filter-4K">4K</label>
      </li>
      <li>
        <input type="checkbox" value="5K" id="filter-5K" />
        <label for="filter-5K">5K</label>
      </li>
    </ul>
    <h3>Response Time</h3>
    <ul class="monitor-responsetime">
      <li>
        <input type="checkbox" value="1ms" id="filter-1ms" />
        <label for="filter-1ms">1ms</label>
      </li>
      <li>
        <input type="checkbox" value="5ms" id="filter-5ms" />
        <label for="filter-5ms">5ms</label>
      </li>
      <li>
        <input type="checkbox" value="10ms" id="filter-10ms" />
        <label for="filter-10ms">10ms</label>
      </li>

    </ul>
    <h3>Brand</h3>
    <ul class="monitor-brand">
      <li>
        <input type="checkbox" value="branda" id="filter-branda" />
        <label for="filter-branda">Brand A</label>
      </li>
      <li>
        <input type="checkbox" value="brandb" id="filter-brandb" />
        <label for="filter-brandb">Brand B</label>
      </li>
      <li>
        <input type="checkbox" value="brandc" id="filter-brandc" />
        <label for="filter-brandc">Brand C</label>
      </li>
      <li>
        <input type="checkbox" class="brandd" id="filter-brandd" />
        <label for="filter-brandd">Brand D</label>
      </li>
      <li>
        <input type="checkbox" value="brande" id="filter-brande" />
        <label for="filter-brande">Brand E</label>
      </li>
      <li>
        <input type="checkbox" value="brandf" id="filter-brandf" />
        <label for="filter-brandf">Brand F</label>
      </li>

    </ul>
  </div>
  <div class="results">
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>


    <div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
  </div>
</body>

</html>

推荐阅读