javascript - trouble with showing content after it is hidden in jquery -
i doing programming challenge lynda.com (about jquery). asked make check boxes allow user hide products page selling sport/health products when unchecked , show them in list when checked again. catigories hide when uncheck check box, won't show again when check again. here jquery code first (i apologize not great indentation):
$("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 - 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>
you should change $(this).checked
this.checked
or $(this).prop('checked')
, think.
Comments
Post a Comment