如何在 javascript 中创建一个通过复选框过滤 div 的过滤器

Question

如何在 javascript 中创建一个通过复选框过滤 div 的过滤器

我需要通过复选框创建一个过滤器，它将在一个类别中指定两个或多个选项。我的过滤器过滤每个类别中的一个选项。

function change() {
  let results = Array.from(document.querySelectorAll('.result > div'));
  // Hide all results
  results.forEach(function(result) {
    result.style.display = 'none';
  });
  // Filter results to only those that meet ALL requirements:
  Array.from(document.querySelectorAll('.filter input[rel]:checked'), function(input) {
    const attrib = input.getAttribute('rel');
    results = results.filter(function(result) {
      return result.classList.contains(attrib);
    });
  });
  // Show those filtered results:
  results.forEach(function(result) {
    result.style.display = 'block';
  });
}
change();

Run Code Online (Sandbox Code Playgroud)

<div class="filter">
  <h1>Select models</h1>
  <div class="checkbox">
    <label><input type="checkbox" rel="apple" onchange="change()"/>Apple</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="samsung" onchange="change()"/>Samsung</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="xiaomi" onchange="change()"/>Xiaomi</label>
  </div>
  <h1>Select processors</h1>
  <div class="checkbox">
    <label><input type="checkbox" rel="a9" onchange="change()"/>A9</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="a8" onchange="change()"/>A8</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="snapdragon" onchange="change()"/>Snapdragon</label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" rel="exynos" onchange="change()"/>Exynos</label>
  </div>
</div>

<div class="result">
  <div class="apple a9">
    <h1>iPhone 7</h1>
  </div>
  <div class="apple a8">
    <h1>iPhone 6</h1>
  </div>
  <div class="samsung exynos">
    <h1>Samsung s7</h1>
  </div>
  <div class="xiaomi snapdragon">
    <h1>Xiaomi Redmi note 4x</h1>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

所以结果我不能同时选择苹果和三星。我只能在每组中选择一个选项。它就像一个单选按钮。但我需要带有多个选项的复选框

Answer 1

zer*_*lix 5

据我了解（通过阅读评论）您希望有以下行为：

模型或处理器复选框在其过滤器组内是“OR”相关的。
但手机必须是任何已检查的型号，并且必须具有任何已检查的处理器。

这段代码应该可以解决您的问题：

function change() {
  var modelCbs = document.querySelectorAll(".models input[type='checkbox']");
  var processorCbs = document.querySelectorAll(".processors input[type='checkbox']");
  var filters = {
    models: getClassOfCheckedCheckboxes(modelCbs),
    processors: getClassOfCheckedCheckboxes(processorCbs)
  };

  filterResults(filters);
}

function getClassOfCheckedCheckboxes(checkboxes) {
  var classes = [];

  if (checkboxes && checkboxes.length > 0) {
    for (var i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];

      if (cb.checked) {
        classes.push(cb.getAttribute("rel"));
      }
    }
  }

  return classes;
}

function filterResults(filters) {
  var rElems = document.querySelectorAll(".result div");
  var hiddenElems = [];

  if (!rElems || rElems.length <= 0) {
    return;
  }

  for (var i = 0; i < rElems.length; i++) {
    var el = rElems[i];

    if (filters.models.length > 0) {
      var isHidden = true;

      for (var j = 0; j < filters.models.length; j++) {
        var filter = filters.models[j];

        if (el.classList.contains(filter)) {
          isHidden = false;
          break;
        }
      }

      if (isHidden) {
        hiddenElems.push(el);
      }
    }

    if (filters.processors.length > 0) {
      var isHidden = true;

      for (var j = 0; j < filters.processors.length; j++) {
        var filter = filters.processors[j];

        if (el.classList.contains(filter)) {
          isHidden = false;
          break;
        }
      }

      if (isHidden) {
        hiddenElems.push(el);
      }
    }
  }

  for (var i = 0; i < rElems.length; i++) {
    rElems[i].style.display = "block";
  }

  if (hiddenElems.length <= 0) {
    return;
  }

  for (var i = 0; i < hiddenElems.length; i++) {
    hiddenElems[i].style.display = "none";
  }
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div class="filter">
    <h1>Select models</h1>
    <div class="models">
      <div class="checkbox">
        <label><input type="checkbox" rel="apple" onchange="change();"/>Apple</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" rel="samsung" onchange="change();"/>Samsung</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" rel="xiaomi" onchange="change();"/>Xiaomi</label>
      </div>
    </div>
    <h1>Select processors</h1>
    <div class="processors">
      <div class="checkbox">
        <label><input type="checkbox" rel="a9" onchange="change();"/>A9</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" rel="a8" onchange="change();"/>A8</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" rel="snapdragon" onchange="change();"/>Snapdragon</label>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" rel="exynos" onchange="change();"/>Exynos</label>
      </div>
    </div>
  </div>

  <div class="result">
    <div class="apple a9">
      <h1>iPhone 7</h1>
    </div>
    <div class="apple a8">
      <h1>iPhone 6</h1>
    </div>
    <div class="samsung exynos">
      <h1>Samsung s7</h1>
    </div>
    <div class="xiaomi snapdragon">
      <h1>Xiaomi Redmi note 4x</h1>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，8 月前
查看次数：	20148 次
最近记录：	8 年，8 月前