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

我正在从lynda.com（关于jquery）做一个编程挑战。我被要求这样做，使复选框允许用户隐藏关于销售运动/健康产品的页面的产品，当它们未被选中时，并且当他们再次被检查时将其显示在列表中。当我取消选中该复选框时，我可以隐藏这些catigories，但当我再次查看时，它们不会再显示。这里是jQuery代码第一个（我不伟大缩进道歉）：隐藏在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>

来源

2017-08-15 hamero

如果这对你来说是一个挑战，我认为你应该自己动手。 – guradio

我大部分时间都在做。我有一半工作。 – hamero

你应该改变$(this).checked到this.checked或$(this).prop('checked')，我想。

来源

2017-08-15 02:38:34 LIXer

或'$（this）.is（“：checked”）' – Barmar

工作正常！谢谢。我不明白，但我喜欢它！谢谢 – hamero

@hamero'$（this）'是一个没有'checked'属性的jQuery对象，所以'$（this）.checked'永远是undefined（false）。但是'this.checked'会随着你的点击而改变，因为'this'是指复选框。所以'$（this）.prop（'checked'）'也会起作用。 – LIXer

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

回答

相关问题