0

このコードを見つけたので、さまざまな要素で動作するように改善したいと考えています。今では 1 つの 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>

すべての助けは非常に高く評価されます

4

1 に答える 1

0

これまでに与えられた詳細は非常に曖昧ですが、以下はあなたが求めているものに沿っていると思います

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表示に関する修正済みのバグを編集

于 2013-03-03T21:14:01.293 に答える