javascript - 获取页面上的所有元素并在过滤器上隐藏它们

Question

我有一些东西可以过滤页面上的卡片组，效果很好，直到我尝试向每个组添加部分标题。理想情况下，我希望在显示“无结果” block 时所有部分标题都消失。

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
  $(".card-grid").show();
  var selectedFilters = {};
  $filterCheckboxes.filter(":checked").each(function () {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });
  var $filteredResults = $(".card");
  $.each(selectedFilters, function (name, filterValues) {
    $filteredResults = $filteredResults.filter(function () {
      var matched = false,
        currentFilterValues = $(this).data("category").split(" ");
      $.each(currentFilterValues, function (_, currentFilterValue) {
        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;
    });
  });
  $(".card").hide().filter($filteredResults).show();
  var all_hidden = true;
  $(".card").each(function (index) {
    if ($(this).is(":visible")) {
      all_hidden = false;
      document.getElementsByClassName("no-results")[0].style.display = "none";
      document.getElementsByClassName("section-header")[0].style.display =
        "block";
    }
  });
  if (all_hidden) {
    $(".card-grid").hide();
    document.getElementsByClassName("no-results")[0].style.display = "block";
    document.getElementsByClassName("section-header")[0].style.display = "none";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
  <ul class="filters">
    <li><input type="checkbox" name="topic" id="topic1" value="topic1"><label for="topic1">Topic 1
    </li>
    <li><input type="checkbox" name="topic" id="topic2" value="topic2"><label for="topic2">Topic 2</li>
    <li><input type="checkbox" name="topic" id="topic3" value="topic3"><label for="topic3">Topic 3
    </li>
  </ul>
</div>

<div class="filter-section-content">
  <div class="filter-container">
    <ul class="filters">
      <li><input type="checkbox" name="content-type" id="subfilter1" value="reads"><label for="subfilter1">subfilter1</label></li>
      <li><input type="checkbox" name="content-type" id="subfilter2" value="linkedin"><label for="subfilter2">subfilter2</label></li>
      <li><input type="checkbox" name="content-type" id="subfilter3" value="subfilter3"><label for="subfilter3">subfilter3</label>
      </li>
    </ul>
  </div>
</div>

<p>&nbsp;</p>

<!--Cards-->
<!--Topic 1-->
<p class="section-header">Topic 1</p>
<div class="card-grid">
  <!--New Card-->
  <div class="card" data-category="topic1 subfilter1">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 1</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body">
      </div>
    </div>
  </div>
  <!--New Card-->
  <div class="card" data-category="topic1 subfilter3">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 1</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body">
      </div>
    </div>
  </div>
</div>
<!--Topic 2-->
<p class="section-header">Topic 2</p>
<div class="card-grid">
  <!--New Card-->
  <div class="card" data-category="topic2 subfilter1">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 2</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body"></div>
    </div>
  </div>
</div>

<div class="no-results">
  No Results
</div>

我知道获取节标题类名的行之后的 [0] 只是拉入第一个，但是当我删除它时，我得到一个“样式未定义”错误。它不应该获取具有指定类名的每个元素吗？

Answer 1

我使用 $(this).parent().prev(".section-header") 找出 header 以设置它在 $(".card 时显示/隐藏").each(函数(索引).

默认情况下，我们应该隐藏“no-results”。如果 all_hidden = true 就显示它。

基本上，我将您的代码更新为以下代码:

var all_hidden = true;
$(".card").each(function(index) {
    if ($(this).is(":visible")) {
        all_hidden = false;
        // Show header if the card is visible
        $(this).parent().prev(".section-header").show();
    } else {
        // Hide header if the card is invisible
        $(this).parent().prev(".section-header").hide();
    }
});
if (all_hidden) {
    document.getElementsByClassName("no-results")[0].style.display = "block";
} else {
    document.getElementsByClassName("no-results")[0].style.display = "none";
}

你可以在这里看到完整的演示:

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on("change", function () {
  $(".card-grid").show();
  var selectedFilters = {};
  $filterCheckboxes.filter(":checked").each(function () {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });
  var $filteredResults = $(".card");
  $.each(selectedFilters, function (name, filterValues) {
    $filteredResults = $filteredResults.filter(function () {
      var matched = false,
        currentFilterValues = $(this).data("category").split(" ");
      $.each(currentFilterValues, function (_, currentFilterValue) {
        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      return matched;
    });
  });
  $(".card").hide().filter($filteredResults).show();
  var all_hidden = true;
  $(".card").each(function (index) {
    if ($(this).is(":visible")) {
      all_hidden = false;
      // Show header if the card is visible
      $(this).parent().prev(".section-header").show();
    } else {
      // Hide header if the card is invisible
      $(this).parent().prev(".section-header").hide();
    }
  });
  if (all_hidden) {
    document.getElementsByClassName("no-results")[0].style.display = "block";
  } else {
    document.getElementsByClassName("no-results")[0].style.display = "none";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
  <ul class="filters">
    <li><input type="checkbox" name="topic" id="topic1" value="topic1"><label for="topic1">Topic 1
    </li>
    <li><input type="checkbox" name="topic" id="topic2" value="topic2"><label for="topic2">Topic 2</li>
    <li><input type="checkbox" name="topic" id="topic3" value="topic3"><label for="topic3">Topic 3
    </li>
  </ul>
</div>

<div class="filter-section-content">
  <div class="filter-container">
    <ul class="filters">
      <li><input type="checkbox" name="content-type" id="subfilter1" value="reads"><label for="subfilter1">subfilter1</label></li>
      <li><input type="checkbox" name="content-type" id="subfilter2" value="linkedin"><label for="subfilter2">subfilter2</label></li>
      <li><input type="checkbox" name="content-type" id="subfilter3" value="subfilter3"><label for="subfilter3">subfilter3</label>
      </li>
    </ul>
  </div>
</div>

<p>&nbsp;</p>

<!--Cards-->
<!--Topic 1-->
<p class="section-header">Topic 1</p>
<div class="card-grid">
  <!--New Card-->
  <div class="card" data-category="topic1 subfilter1">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 1</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body">
      </div>
    </div>
  </div>
  <!--New Card-->
  <div class="card" data-category="topic1 subfilter3">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 1</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body">
      </div>
    </div>
  </div>
</div>
<!--Topic 2-->
<p class="section-header">Topic 2</p>
<div class="card-grid">
  <!--New Card-->
  <div class="card" data-category="topic2 subfilter1">
    <div class="card-front-wrap">
      <div class="card-front">
        <p class="label">Topic 2</p>
        <h1>Title</h1>
      </div>
    </div>
    <div class="card-overlay">
      <h5>More Info <i class="far fa-arrow-alt-circle-down fa-lg"></i></h5>
      <div class="card-body"></div>
    </div>
  </div>
</div>
<!-- default hide no results -->
<div class="no-results" style="display: none">
  No Results
</div>