Question

我正在从lynda.com（关于jquery）做一个编程挑战。我被要求制作它，以便复选框允许用户隐藏产品，以便在未经检查时销售运动/健康产品，并在再次检查时将其显示在列表中。当我取消选中复选框时，我可以隐藏catigories，但是当我再次检查时它们将不再显示。首先是JQuery代码（我为没有很好的缩进道歉）：

$("document").ready(function() {
      var combo = $("input[name=vitamin]").add("input[name=proteinbar]").add("input[name=mineralwater]");
      combo.on("change", function() {
        var name = $(this).attr("name");
        if (!$(this).checked) {
          filterList(name, $(this));
        }
        if ($(this).checked) {
          unfilterList(name, $(this));
        }
      });
    });

    function filterList(name, selector) {
      $(".product-item").each(function(index) {
        if (($(this).children("h2").data("type") == name) && !selector.checked) {
          $(this).hide();
        }
      });
    }

    function unfilterList(name, selector) {
      $(".product-item").each(function(index) {
        if (($(this).children("h2").data("type") == name)) {
          $(this).show();
        }
      });
      return false;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
          show:</br>
          <input type="checkbox" checked value="mineralWater" name="mineralwater" />Mineral Water <br>
          <input type="checkbox" value="proteinbar" name="proteinbar" checked /> protein bars
          <input type="checkbox" checked value="Vitamins" name="vitamin" /> vitamins <br>
      </form>
      <ul class="product-list">
        <li class="product-item" data-prod_id="V-A1037">
            <img class="product-image" src="images/products/vitamin-a.jpg" alt="Vitamin A - Product Photo">
            <h2 class="product-name" data-type="vitamin">Vitamin A</h2>
        </li>
        <li class="product-item" data-prod_id="V-BC2178">
            <img class="product-image" src="images/products/vitamin-bcomplex.jpg" alt="B Complex - Product Photo">
            <h2 class="product-name" data-type="vitamin">Vitamin-B Complex</h2>
        </li>
        <li class="product-item" data-prod_id="MW-8812">
            <img class="product-image" src="images/products/mineralwater-blueberry.jpg" alt="Blueberry Mineral Water - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Blueberry Mineral Water</h2>
        </li>

Answer 1

我认为您应该将$(this).checked更改为this.checked或$(this).prop('checked')。

在jquery中隐藏后显示内容的麻烦

1 个答案: