Question

我正在尝试添加第3个过滤器来跟踪/显示根据所选选项显示的元素数量（＃filter9）。这就是我到目前为止所获得的代码：Filter based on combination of multiple select and single select elements。

这就是我要编辑的内容：https://jsfiddle.net/sandiie/xd2482f6/

<select id='filter7'>
    <option>Purchase Date</option>
    <option value="jan">Jan</option>
    <option value="feb">Feb</option>
    <option value="mar">March</option>
</select>

<select id="filter8" >
   <option value="photo"> Photos</option>
   <option value="video"> Videos</option>
   <option value="all" > all</option>
</select>

<select id="filter9" >
   <option value="items1"> 1</option>
   <option value="items2"> 2</option>
   <option value="items4" > all</option>
</select>


<ol id="list">
   <li class=" post item jan photo all">Jan photo</li>
   <li class="post item feb photo all">Feb photo</li>
   <li class=" post item mar photo">March photo</li>
   <li class="post item jan photo">Jan photo</li>
   <li class="post item feb photo">feb photo</li>

   <li class="post item jan video">Jan video</li>
   <li class="item vid feb">Feb video</li>
   <li class="item vid mar">March video</li>
   <li class="item vid jan">Jan video</li>
</ol>


jQuery(document).ready(function ($) {

   var values = [7, 8];

   $("select").on("change", function () {

       var showAll = true,
           show = [],
           joined;

       $.each(values, function (index, id) {
           var $el = $('#filter' + id),
               multi = $el.attr('multiple'),
               val = $el.val();

           if (multi) {
               if (val !== null) {
                   showAll = false;
                   $.each(val, function (i, v) {
                       show.push( v );
                   });
               }
           } else {
               if (val != 'all') {
                   showAll = false;
                   show.push( val );
               }
           }


       });

       console.log(showAll);
       console.log(show);

       if (showAll) {
           //show all items 
           $(".item").fadeIn("fast");
       } else {

           joined = '.' + show.join('.');

           console.log( joined );

           $(".item").hide();
           $( joined ).fadeIn("fast");
       }

   });

   $.each(values, function (index, id) {
       $('#filter' + id).chosen();
   });


});

Answer 1

以下是工作演示，只是一个基本过滤器，用于对要显示https://jsfiddle.net/xd2482f6/6/

的li元素的数量应用filter9

不是粘贴你可以从JS fiddler获得的所有代码，而是只添加所做的更改。

<select id="filter9" >
    <option value="-1" > all</option>
   <option value="1"> 1</option>
   <option value="2"> 2</option>
</select>

然后，根据filter9选择，我们可以显示执行fadein时显示的li次结果。

  if (showAll) {
        //show all items 
        $(".item").fadeIn("fast");
    } else {

        joined = '.' + show.join('.');

        console.log( joined );
        //how many results to show
        var amount_to_show = parseInt($("#filter9").val())

        $(".item").hide();
        $( joined ).each(function(i,element){

            if (amount_to_show != -1 && i > (amount_to_show - 1)) return true;

            $(element).fadeIn("fast");
        })
    }

根据所选选项显示元素数量

1 个答案: