[jQuery] 제이쿼리 연습문제3

아래 스트립트 내용을 쓰는 것입니다.

문제: html내용의 상품 리스트 중 버튼을 클릭한 상품만 나오도록 하세요.

[html]

아래중 div내의 form부분은 버튼관련 html을 추가해야 하는 것입니다. ( <div id="productControls">)

<section id="products" class="section">
    <header class="imageheader"></header>
    <div class="container">
        <h2 class="headline">Products</h2>
        <p>H+ Sport is <em>dedicated to creating</em> eco-friendly, high-quality, nutrient-rich, nutritional products that <em>enhance active lifestyles</em>. We <a href="#guarantee">guarantee</a> it. Take a look at some of our products.</p>
    </div>
    <!-- container -->
    <div id="productControls">

    </div>
    <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>
        <li class="product-item" data-prod_id="V-C6614">
            <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
            <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
        </li>
        <li class="product-item" data-prod_id="PB-8154">
            <img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo">
            <h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2>
        </li>
        <li class="product-item" data-prod_id="V-CA4543">
            <img class="product-image" src="images/products/vitamin-calcium.jpg" alt="Vitamin Calcium - Product Photo">
            <h2 class="product-name" data-type="vitamin">Calcium Vitamin</h2>
        </li>
        <li class="product-item" data-prod_id="V-D1825">
            <img class="product-image" src="images/products/vitamin-d.jpg" alt="Vitamin D - Product Photo">
            <h2 class="product-name" data-type="vitamin">Vitamin D</h2>
        </li>
        <li class="product-item" data-prod_id="V-F2225">
            <img class="product-image" src="images/products/vitamin-flaxseed-oil.jpg" alt="Flaxseed Oil - Product Photo">
            <h2 class="product-name" data-type="vitamin">Flaxseed Oil Vitamin</h2>
        </li>
        <li class="product-item" data-prod_id="V-I7456">
            <img class="product-image" src="images/products/vitamin-iron.jpg" alt="Vitamin Iron - Product Photo">
            <h2 class="product-name" data-type="vitamin">Iron Vitamin</h2>
        </li>
        <li class="product-item" data-prod_id="MW-9143">
            <img class="product-image" src="images/products/mineralwater-lemonlime.jpg" alt="Mineral Water Lemon Lime - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Lemon Lime Mineral Water</h2>
        </li>
        <li class="product-item" data-prod_id="V-M0019">
            <img class="product-image" src="images/products/vitamin-magnesium.jpg" alt="Vitamin Magnesium - Product Photo">
            <h2 class="product-name" data-type="vitamin">Magnesium Vitamin</h2>
        </li>
        <li class="product-item" data-prod_id="V-MV7763">
            <img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo">
            <h2 class="product-name" data-type="vitamin">Multi-vitamin</h2>
        </li>
        <li class="product-item" data-prod_id="PB-1234">
            <img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo">
            <h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</h2>
        </li>
        <li class="product-item" data-prod_id="MW-S0987">
            <img class="product-image" src="images/products/mineralwater-strawberry.jpg" alt="Mineral Water Strawberry - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Strawberry Mineral Water</h2>
        </li>
        <li class="product-item" data-prod_id="PB-1919">
            <img class="product-image" src="images/products/proteinbar-lemon.jpg" alt="Protein Bar Lemon - Product Photo">
            <h2 class="product-name" data-type="proteinbar">Lemon Protein Bar</h2>
        </li>
        <li class="product-item" data-prod_id="MW-O1980">
            <img class="product-image" src="images/products/mineralwater-orange.jpg" alt="Mineral Water Orange - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Orange Mineral Water</h2>
        </li>
        <li class="product-item" data-prod_id="MW-P1968">
            <img class="product-image" src="images/products/mineralwater-peach.jpg" alt="Mineral Water Peach - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Peach Mineral Water</h2>
        </li>
        <li class="product-item" data-prod_id="MW-R2003">
            <img class="product-image" src="images/products/mineralwater-raspberry.jpg" alt="Mineral Water Raspberry - Product Photo">
            <h2 class="product-name" data-type="mineralwater">Raspberry Mineral Water</h2>
        </li>
    </ul>
    <!-- product-list -->
</section>
<!-- #products -->

[추가할 html]

    <div id="productControls">
        <form>  
            <div>
                <span>Show: </span>
                <input id="cbVitamins" type="checkbox" checked="checked" />
                <label for="cbVitamins">Vitamins </label>
                <input id="cbMineralWater" type="checkbox" checked="checked" />
                <label for="cbMineralWater">Mineral Water </label>
                <input id="cbProtein" type="checkbox" checked="checked" />
                <label for="cbProtein">Protein Bars </label>
            </div>
        </form>
    </div>

[jQuery]

참조할 자바스크립트 부분(https://www.w3schools.com/jsref/prop_style_display.asp)

document.getElementById("myDIV").style.display = "none";

<script>
    $(function () {
        $("#products h2.product-name[data-type='mineralwater']").css("background-color", "#2982D0");
        $("#products h2.product-name[data-type='vitamin']").css("background-color", "#12500F");
        $("#products h2.product-name[data-type='proteinbar']").css("background-color", "#4E0F50");

        document.querySelector('#cbVitamins').addEventListener('change',function (evt) {
            updateProductView("vitamins", evt.target.checked);
        });
        document.querySelector('#cbMineralWater').addEventListener('change',function (evt) {
            updateProductView("mineralwater", evt.target.checked);
        });
        document.querySelector('#cbProtein').addEventListener('change',function (evt) {
            updateProductView("proteinbar", evt.target.checked);
        });

        $(".product-item").each(function () {
            var prodName = encodeURIComponent($(this).children("h2").text());
            var prodID = encodeURIComponent($(this).data("prod_id"));

            var link = $("<a href='product.html?prodName=" + prodName + "&prodID=" + prodID + "'/>");
            $(this).children("img").wrap(link);
        })
        
    })

    function updateProductView(categoryName, bVisible) {
        // get a list of the product items for the given category.
        // Use the data attributes to narrow the list
        var dataSelectorVal = "";
        switch (categoryName) {
        case "vitamins":
            dataSelectorVal = "h2[data-type='vitamin']";
            break;
        case "mineralwater":
            dataSelectorVal = "h2[data-type='mineralwater']";
            break;
        case "proteinbar":
            dataSelectorVal = "h2[data-type='proteinbar']";
            break;
        }
        // use the has() function to select the li tags that are product items
        // that contain the h2 tag with the corresponding data attribute value
        $(".product-item").has(dataSelectorVal).css('display', bVisible ? "" : "none");
    }
</script>