隱藏在jquery中後顯示內容的麻煩

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')，我想。