如何让我的复选框过滤器工作？

时间：2016-07-02 15:27:02

标签： javascript jquery html json checkbox

我有一个由jquery生成的正常运行的产品列表。现在我需要它来过滤数组属性：颜色，大小和价格。我从一个按类过滤列表项的问题复制了一个代码，它运行得很好，但对我来说，我只是无法弄清楚如何根据属性进行更改。我认为需要改变的是最后一个函数re.test($this.attr("class"))。

<!--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="https://code.jquery.com/jquery-3.0.0.min.js"></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"]();
   });
});

2 个答案:

答案 0 :(得分：0)

首先，您必须修改渲染功能，添加颜色attr：

$(productList.products).each(function(index){
    _createELement+=
        '<li class="product-it" color="'+ this.color +'"> <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>'
   });

然后你可以过滤你的清单：

function filterBYColor(color) {

  $('.product-it').each(function(){
     var $this = $(this); //your li
     if ($(this).attr('color') == color) {
        $this.show(); //show it if it has the right color
     } else {
        $this.hide(); //hid id it's not
     }

  })
};

试一试：

filterByColor('azul');

修改 另一种按多种颜色过滤的功能：

filterByColors(colors) {

    $('.product-it').each(function(){
         var $this = $(this); //your li
         var color = $this.attr('color'); //it's color

         if (color && colors.indexOf(color) != -1) {
            $this.show(); //show it if it has the right color
         } else {
            $this.hide(); //hid id it's not
         }

      })
}


$(document).on('change', '[name="prices"]', function(){

    var $this = $(this);
    var color = $this.val();
    var colors = [];

    $('[name="prices"]').each(function(){
       if ($(this).prop('checked')) {
           colors.push($(this).attr('color'));
       }
    })

    filterByColors(colors);
})

只需将此代码添加到页面即可。我没有测试过它，但它应该。

答案 1 :(得分：0)

它对我有用。 这里很少有值像 - prc0-50 => prc-0-50。 JS中的priceRange对象正在使用这些值

    <h4>Faixa de Preço</h4>
    <ul>
        <li><input type="checkbox" name="prices" value="prc-0-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="prc-301-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>

请试试这个JS 

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"}
]
};

var priceRange = {
50: 'prc-0-50',
150: 'prc-51-150',
300: 'prc-151-300',
500: 'prc-301-500',
10000000000: 'prc-501-fim'
}

//carrega lista sem filtros
function loadList() {

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

$(productList.products).each(function(index) {
    var $this = this;
    var priceRangeClass = '';
    var productColor = (this.color).toLowerCase();
    for (index in priceRange) {
        if (parseFloat($this.price) <= parseFloat(index)) {
            priceRangeClass = priceRange[index];
            break;
        }
    }
    _createELement +=
        '<li class="product-it ' + priceRangeClass + ' ' + productColor + '"> <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) / 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 list = $("#ProductList");
    var re = new RegExp($("#filters :checkbox:checked").map(function() {
        return (this.value).toLowerCase();
    }).get().join("|"));
    list.children("li").show();
    list.children("li").each(function() {
        var $this = $(this);
        $this[re.source != "" && re.test($this.attr("class")) ? "show" : "hide"]();
    });
});

}

我相信您可以根据尺寸实施过滤

相关问题
最新问题