按产品或项目下拉筛选

Question

我刚刚使用 HTML 和 CSS 制作了一个简单的前端页面。此页面有两种产品，分别是相机和硬盘录像机。当我从下拉列表中 select 相机时，我想过滤相机，与 dvr 相同。但我不知道该怎么做。我尝试使用 list.js 但没有用。

这是我的 HTML 页面代码。过滤代码部分

<nav class="product-filter">
        <h1>Security Products</h1>
        <div class="sort">
          <div class="collection-sort">
            <label>Filter by:</label>
            <select id="list" onchange="getSelectedValue()">
              <option selected="selected">Select a product</option>
              <option value="camera">Camera</option>
              <option value="dvr">DVR</option>
            </select>
          </div>
        </div>
    </nav>

产品卡码(第一个是摄像机，第二个是DVR)

      <section class="products">
        <div class="product-card camera">
            <div class="product-image">
                <img src="assets/images/services/hikvision/1.jpg">
                <span id="item-description">CAMERA</span>
            </div>
            <div class="product-info">
                <h5>Hikvision ColorVu Series</h5>
                <h6>.99</h6>
            </div>
        </div>
        
        <div class="product-card dvr">
            <div class="product-image">
                <img src="assets/images/services/hikvision/2.jpg">
                <span id="item-description">DVR</span>
            </div>
            <div class="product-info">
                <h5>Hikvision Value Series</h5>
                <h6>.99</h6>
            </div>
        </div>
     </section>

此外，我添加了使用 JS 从下拉列表中获取值的功能。它只在控制台中显示值。

<script>
        function getSelectedValue() {
            var selectValue = document.getElementById("list").value;
            console.log(selectValue);
        }

    </script>

Answer 1

const cameraContainer = document.querySelector(".camera");
const dvrContainer = document.querySelector(".dvr");

function getSelectedValue() {
  var selectValue = document.getElementById("list").value;
  if (selectValue === "camera") {
    cameraContainer.style.display = "block";
    dvrContainer.style.display = "none";
  } else if (selectValue === "dvr") {
    cameraContainer.style.display = "none";
    dvrContainer.style.display = "block";
  } else {
    cameraContainer.style.display = "block";
    dvrContainer.style.display = "block";
  }
}

<nav class="product-filter">
  <h1>Security Products</h1>
  <div class="sort">
    <div class="collection-sort">
      <label>Filter by:</label>
      <select id="list" onchange="getSelectedValue()">
        <option selected="selected">Select a product</option>
        <option value="camera">Camera</option>
        <option value="dvr">DVR</option>
      </select>
    </div>
  </div>
</nav>
<section class="products">
  <div class="product-card camera">
    <div class="product-image">
      <img src="assets/images/services/hikvision/1.jpg">
      <span id="item-description">CAMERA</span>
    </div>
    <div class="product-info">
      <h5>Hikvision ColorVu Series</h5>
      <h6>.99</h6>
    </div>
  </div>

  <div class="product-card dvr">
    <div class="product-image">
      <img src="assets/images/services/hikvision/2.jpg">
      <span id="item-description">DVR</span>
    </div>
    <div class="product-info">
      <h5>Hikvision Value Series</h5>
      <h6>.99</h6>
    </div>
  </div>
</section>

或者你可以做一个函数，让它简单易懂，易于调试

const cameraContainer = document.querySelector(".camera");
const dvrContainer = document.querySelector(".dvr");

function showCameraContainer(show) {
    const display = show ? "block" : "none";
    cameraContainer.style.display = display;
}

function showDVRContainer(show) {
    const display = show ? "block" : "none";
    dvrContainer.style.display = display;
}

function getSelectedValue() {
    var selectValue = document.getElementById("list").value;
    console.log(selectValue);
    if (selectValue === "camera") {
        showCameraContainer(true);
        showDVRContainer(false);
    } else if (selectValue === "dvr") {
        showCameraContainer(false);
        showDVRContainer(true);
    } else {
        showCameraContainer(true);
        showDVRContainer(true);
    }
}

Answer 2

您可以在html中的所有value="all"选择“Select一个产品”选项并使用该功能显示和隐藏..

<option value="all" selected="selected">Select a product</option>

function getSelectedValue() {
  const camera = document.querySelector(".camera");
  const dvr = document.querySelector(".dvr");
  const value = document.getElementById("list").value;
  const displayCamera = value === "camera" || value === "all" ? "block" : "none";
  const displayDvr = value === "dvr" || value === "all" ? "block" : "none";
  camera.style.display = displayCamera;
  dvr.style.display = displayDvr;
}

<nav class="product-filter">
  <h1>Security Products</h1>
  <div class="sort">
    <div class="collection-sort">
      <label>Filter by:</label>
      <select id="list" onchange="getSelectedValue()">
        <option value="all" selected="selected">Select a product</option>
        <option value="camera">Camera</option>
        <option value="dvr">DVR</option>
      </select>
    </div>
  </div>
</nav>
<section class="products">
  <div class="product-card camera">
    <div class="product-image">
      <img src="assets/images/services/hikvision/1.jpg">
      <span id="item-description">CAMERA</span>
    </div>
    <div class="product-info">
      <h5>Hikvision ColorVu Series</h5>
      <h6>.99</h6>
    </div>
  </div>

  <div class="product-card dvr">
    <div class="product-image">
      <img src="assets/images/services/hikvision/2.jpg">
      <span id="item-description">DVR</span>
    </div>
    <div class="product-info">
      <h5>Hikvision Value Series</h5>
      <h6>.99</h6>
    </div>
  </div>
</section>

Answer 3

兄弟。你可以试试这个。这将在选择相机时过滤所有带有 camera class 的卡片。希望它会有所帮助。谢谢。

function getSelectedValue() {
  const selectValue = document.getElementById("list").value;
  const acceptedValues = ['camera', 'dvr'];
  const productCards = document.querySelectorAll('.product-card');

  productCards.forEach(card => {
    if(acceptedValues.includes(selectValue)) {
      if(card.classList.contains(selectValue)) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    } else {
      card.style.display = 'block';
    }
  })
}

img {
  width: 200px;
}

.products {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0;
}

.product-card {
  margin: 0 10px 0 0;
}

<nav class="product-filter">
  <h1>Security Products</h1>
  <div class="sort">
    <div class="collection-sort">
      <label>Filter by:</label>
      <select id="list" onchange="getSelectedValue()">
        <option selected="selected">Select a product</option>
        <option value="camera">Camera</option>
        <option value="dvr">DVR</option>
      </select>
    </div>
  </div>
</nav>
    
<section class="products">
  <div class="product-card camera">
    <div class="product-image">
      <h4 id="item-description">CAMERA</h4>
      <img src="https://www.borrowlenses.com/blog/wp-content/uploads/2016/07/vlogging-gear-best-of-2019.jpg">
    </div>
    <div class="product-info">
      <h5>Hikvision ColorVu Series</h5>
      <h6>.99</h6>
    </div>
  </div>
  <div class="product-card dvr">
    <div class="product-image">
        <h4 id="item-description">DVR</h4>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQn4SUVDMC9q4Pa2Bvf0GJDbEwdFnKeC6AzcQ&usqp=CAU">
    </div>
    <div class="product-info">
        <h5>Hikvision Value Series</h5>
        <h6>.99</h6>
    </div>
  </div>
  <div class="product-card camera">
    <div class="product-image">
      <h4 id="item-description">CAMERA</h4>
      <img src="https://www.borrowlenses.com/blog/wp-content/uploads/2016/07/vlogging-gear-best-of-2019.jpg">
    </div>
    <div class="product-info">
      <h5>Hikvision ColorVu Series</h5>
      <h6>.99</h6>
    </div>
  </div>
  <div class="product-card camera">
    <div class="product-image">
      <h4 id="item-description">CAMERA</h4>
      <img src="https://www.borrowlenses.com/blog/wp-content/uploads/2016/07/vlogging-gear-best-of-2019.jpg">
    </div>
    <div class="product-info">
      <h5>Hikvision ColorVu Series</h5>
      <h6>.99</h6>
    </div>
  </div>
  <div class="product-card dvr">
    <div class="product-image">
        <h4 id="item-description">DVR</h4>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQn4SUVDMC9q4Pa2Bvf0GJDbEwdFnKeC6AzcQ&usqp=CAU">
    </div>
    <div class="product-info">
        <h5>Hikvision Value Series</h5>
        <h6>.99</h6>
    </div>
  </div>
  <div class="product-card dvr">
    <div class="product-image">
        <h4 id="item-description">DVR</h4>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQn4SUVDMC9q4Pa2Bvf0GJDbEwdFnKeC6AzcQ&usqp=CAU">
    </div>
    <div class="product-info">
        <h5>Hikvision Value Series</h5>
        <h6>.99</h6>
    </div>
  </div>
</section>

按产品或项目下拉筛选

Dropdown Filter by product or items

html

javascript

html-select

drop-down-menu