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

Question

我正在尝试添加第三个过滤器来跟踪/显示根据所选选项(#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

这里是一个工作演示，只是一个基本过滤器，用于对要显示的 li 元素应用 filter9 https://jsfiddle.net/xd2482f6/6/

我不会粘贴从 JS fiddler 获得的所有代码，而是添加所做的更改。

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

然后，从 filter9 选择中，我们可以显示淡入淡出时要显示的 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");
        })
    }