samedi 2 juillet 2016

How to make my checkbox filter work?

I have a functioning product list that is generated by jquery. Now I need it to get filtered by the array attributes: color, size and price. I copied a code from a question that filtered the list items by it's classes, and it was working perfectly, but for me, I just can't figure out how to change that to filter by the attributes. I think what needs to be altered is this in the last function "re.test($this.attr("class"))", I just don't know how. I think it's a simple and objective question, can anybody help me?

<!--HTML-->
<!DOCTYPE HTML>
 <html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Teste Vaga Front End</title>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="http://ift.tt/1UpRC62"></script>
    <script src="js/js.js"></script>
</head>
<body onLoad="loadList()">

     <header class="menu">
        <div class="container">
            <nav>
                <ul class="menu-lt">
                    <li class="menu-it"><a class="menu-lk logo" href="#">Profite</a></li>
                    <li class="menu-it lst"><a class="menu-lk cart" href="#">Carrinho</a></li>
                </ul>
            </nav>
        </div>
    </header>


    <h2 class="page-title container">Vestidos</h2>

    <div class="content container">
        <aside class="sidebar">
            <h3 class="mobile-btn filter">Filtrar</h3>

            <div id="filters" class="filters-wrapper">
                <div class="fltrs-wppr">
                <section id="colors">
                    <h4>Cores</h4>
                    <ul>
                        <li><input type="checkbox" name="colors" value="Amarelo"> Amarelo</li>
                        <li><input type="checkbox" name="colors" value="Azul"> Azul</li>
                        <li><input type="checkbox" name="colors" value="Branco"> Branco</li>
                        <li><input type="checkbox" name="colors" value="Cinza"> Cinza</li>
                        <li><input type="checkbox" name="colors" value="Laranja"> Laranja</li>
                    </ul>
                </section>
                <section id="sizes">
                    <h4>Tamanhos</h4>
                    <ul class="fltr-szs-lt">
                        <li class="fltr-szs-it"><span class="fltr-szs">P</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">M</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">G</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">GG</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">U</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">36</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">38</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">40</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">42</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">44</span></li>
                        <li class="fltr-szs-it"><span class="fltr-szs">46</span></li>
                    </ul>
                </section>
                <section id="prices">
                    <h4>Faixa de Preço</h4>
                    <ul>
                        <li><input type="checkbox" name="prices" value="prc0-50"> de R$0 até R$50</li>
                        <li><input type="checkbox" name="prices" value="prc-51-150"> de R$51 até R$150</li>
                        <li><input type="checkbox" name="prices" value="prc-151-300"> de R$151 até R$300</li>
                        <li><input type="checkbox" name="prices" value="prc301-500"> de R$301 até R$500</li>
                        <li><input type="checkbox" name="prices" value="prc-501-fim"> a partir de R$501</li>
                    </ul>
                </section>
                </div>
            </div>
        </aside>

        <section id="products" class="products">
            <header class="products-hdr">
                <h3 class="mobile-btn order">Ordenar</h3>
                <select class="prd-order">
                  <option value="MaisRecentes">Mais Recentes</option>
                  <option value="MaiorPreco">Maior Preço</option>
                  <option value="MenorPreco">Menor Preço</option>
                </select>
            </header>
            <ul id="ProductList" class="product-lt">

            </ul>
        </section>
    </div>
</body>
</html>

var productList = {"products": [
    {"image": "img/vestido1.jpg", "description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390.00"},
    {"image": "img/vestido2.jpg", "description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "520.00"},
    {"image": "img/vestido3.jpg", "description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "42.90"},
    {"image": "img/vestido4.jpg", "description": "Bata Bordada", "color": "branco", "size":"GG", "price": "130.00"},
    {"image": "img/vestido5.jpg", "description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "380.00"},
    {"image": "img/vestido6.jpg", "description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "44.00"},
    {"image": "img/vestido7.jpg", "description": "Bata Bordada", "color": "cinza", "size":"40", "price": "180.90"},
    {"image": "img/vestido8.jpg", "description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "560.00"},
    {"image": "img/vestido2.jpg", "description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "122.90"}
]
};

//carrega lista sem filtros
function loadList() {

    var list = $("#ProductList");
    var _createELement="";

   $(productList.products).each(function(index){
    _createELement+=
        '<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="' + this.image + '"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc"> R$' +  this.price + '</span></br> <span class="prd-par">até 5x de R$' +  parseFloat($(this.price).val()) /5.0 + '</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>'
   });

   $(list).append(_createELement);

}

//filtro
$("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $("li").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});




Aucun commentaire:

Enregistrer un commentaire