jquery - 是否可以使用复选框过滤不同的元素？

Question

我找到了这段代码，我想改进它以使用不同的元素。现在它只适用于一个 div 类，但如果我想让它与这样的东西一起工作怎么办：

<div class="list">

<li class="one category1">               //get some category from this li
<a href="link">
<img src="img"/>
<p class="name">name</p></a>
<p class="age">Age: days</p>
<span class="rating category2"></span>   //get some category from this span
<span class="status category3"></span></li>   //get some category from this span

...code repeats from <li class="one category1"> to </li> many times with different values and that the content i filter

我发现的代码：

    <ul id="filter1">
        <li>
            <input type="checkbox" name="filter1" value="dark">
            Dark</li>
        <li>
            <input type="checkbox" name="filter1" value="medium">
            Medium</li>
        <li>
            <input type="checkbox" name="filter1" value="light">
            Light</li>
    </ul>

    <ul id="filter2">
        <li>
            <input type="checkbox" name="filter2" value="sm">
            Small</li>
        <li>
            <input type="checkbox" name="filter2" value="med">
            Medium</li>
        <li>
            <input type="checkbox" name="filter2" value="lge">
            Large</li>
    </ul>

    <ul id="filter3">
        <li>
            <input type="checkbox" name="filter3" value="smooth">
            Smooth</li>
        <li>
            <input type="checkbox" name="filter3" value="riven">
            Riven</li>
        <li>
            <input type="checkbox" name="filter3" value="honed">
            Honed</li>
    </ul>

    <ul id="filter4">
        <li>
            <input type="checkbox" name="filter4" value="a">
            Up to £25</li>
        <li>
            <input type="checkbox" name="filter4" value="b">
            £25 to £45</li>
        <li>
            <input type="checkbox" name="filter4" value="c">
            £45 to £65</li>
        <li>
            <input type="checkbox" name="filter4" value="d">
            £65 to £85</li>
        <li>
            <input type="checkbox" name="filter4" value="e">
            over £85</li>
    </ul>

    <p><a class="showall" href="#" />Clear Filters</a></p>

    <div class="list dark sm smooth b">dark small smooth b</div>
    <div class="list medium lge honed d">medium large honed d</div>
    <div class="list dark med smooth d">dark medium smooth d</div>
    <div class="list light sm smooth b">light small smooth b</div>
    <div class="list light lge riven b">light large riven b</div>
    <div class="list dark sm riven c">dark small riven c</div>
    <div class="list medium med riven a">medium medium riven a</div>
    <div class="list medium lge honed e">medium large honed e</div>

    <div class="NoResults"></div>

    <script>

        $("#filter1 :checkbox,#filter2 :checkbox,#filter3 :checkbox,#filter4 :checkbox").click(function () {

            $("div.list").hide();

            var Filter1Array = [];
            var Filter2Array = [];
            var Filter3Array = [];
            var Filter4Array = [];
            var filter1_Count = 0, filter2_Count = 0, filter3_Count = 0, filter4_Count = 0;

            $("#filter1 :checkbox:checked").each(function () {
                Filter1Array[filter1_Count] = $(this).val();
                filter1_Count++
            });

            $("#filter2 :checkbox:checked").each(function () {
                Filter2Array[filter2_Count] = $(this).val();
                filter2_Count++
            });

            $("#filter3 :checkbox:checked").each(function () {
                Filter3Array[filter3_Count] = $(this).val();
                filter3_Count++
            });

            $("#filter4 :checkbox:checked").each(function () {
                Filter4Array[filter4_Count] = $(this).val();
                filter4_Count++
            });

            var filter1string
            var filter2string
            var filter3string
            var filter4string

            var filter1checked = false
            var filter2checked = false
            var filter3checked = false
            var filter4checked = false

            if (filter1_Count == 0) { filter1_Count = 1; } else { filter1checked = true; }
            if (filter2_Count == 0) { filter2_Count = 1; } else { filter2checked = true; }
            if (filter3_Count == 0) { filter3_Count = 1; } else { filter3checked = true; }
            if (filter4_Count == 0) { filter4_Count = 1; } else { filter4checked = true; }

            for (f1 = 0; f1 < filter1_Count; f1++) {

                if (Filter1Array[f1] != null) { filter1string = '.' + Filter1Array[f1] } else { filter1string = '' }

                for (f2 = 0; f2 < filter2_Count; f2++) {

                    if (Filter2Array[f2] != null) { filter2string = '.' + Filter2Array[f2] } else { filter2string = '' }

                    for (f3 = 0; f3 < filter3_Count; f3++) {

                        if (Filter3Array[f3] != null) { filter3string = '.' + Filter3Array[f3] } else { filter3string = '' }

                        for (f4 = 0; f4 < filter4_Count; f4++) {

                            if (Filter4Array[f4] != null) { filter4string = '.' + Filter4Array[f4] } else { filter4string = '' }

                            var QueryString = filter1string + filter2string + filter3string + filter4string
                            $(QueryString).fadeIn('fast');
                        }
                    }
                }
            }

            if (!filter1checked && !filter2checked && !filter3checked && !filter4checked) {
                $("div.list").fadeIn('fast');
            };

            if ($('div.list:visible').length === 0) {
                $(".NoResults").html("<p class='error'>No products match your filter selections. Please try a different combination.</p>");
            }
            else { $(".NoResults").html(""); }

        });

        $('a.showall').click(function () {
            $("div.list").fadeIn('fast');
            $("#filter1 :checkbox").removeAttr('checked');
            $("#filter2 :checkbox").removeAttr('checked');
            $("#filter3 :checkbox").removeAttr('checked');
            $("#filter4 :checkbox").removeAttr('checked');
            $(".NoResults").html("");
            return false;
        });

    </script>
</body>
</html>

每一个帮助将不胜感激

Answer 1

我相信以下内容与您所追求的一致，尽管到目前为止给出的细节非常模糊

var filterArray=[];

$(function(){    
    var $items=$('#items .list'), $noRes=$('.NoResults')

   var $controls = $(':checkbox').change(function(){
        if(this.checked){
            filterArray.push(this.value)
        }else{
           var idx= $.inArray(this.value, filterArray);
            filterArray.splice( idx,1);     
        }      
        filterItems();          
    });


    $('a.showall').click(function(e){
        e.preventDefault();

        $controls.prop('checked',false);
        filterArray=[];
        filterItems();
    });

    function filterItems(){
      var results=0;
      if( filterArray.length){          
              $items.hide(); 
              var $filterItems=$items.filter( '.'+filterArray.join('.')).show()
              results=$filterItems.length;
          }else{
              $items.show();
          }
          $noRes[results || !filterArray.length ? 'hide' : 'show' ]();
    }
});

演示：http: //jsfiddle.net/xB6Xb/1

如果没有关于如何处理用户在每个类别中选择多个价格或多个项目的规则，就很难做更多的事情。

no results使用显示编辑修复的错误