我如何按类别“加载更多”数据，而不是全部加载

Question

问题是：我如何才能按类别加载更多数据，而不是一起加载？例如我在得到结果后选择数字2我需要加载更多数据但仅限于2号过滤器。 提前完成。

html -

number:
<select class="filterby">
  <option value="all">all</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

type:
<select class="filterby">
  <option value="all">all</option>
  <option value="plastic">plastic</option>
  <option value="metal">metal</option>
</select>

<br>

<div id="filter-content">

  <div class="all 1 plastic">1 plastic</div>
  <div class="all 1 metal">1 metal</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 3 plastic">3 plastic</div>
  <div class="all 3 metal">3 metal</div>

</div>

<br>

<div id="load-more">Load more</div>

这里是

 $("select.filterby").change(function() {
     var filters = $.map($("select.filterby").toArray(), function(e) {
      return $(e).val();
      }).join(".");
      $("div#filter-content").find("div").hide();
      $("div#filter-content").find("div." + filters).show();
    });


    size = $("#filter-content div").size();
    x = 3;
    $('#filter-content div:lt(' + x + ')').show();
    $('#load-more').click(function() {
      x = (x + 1 <= size) ? x + 1 : size;
      $('#filter-content div:lt(' + x + ')').show();
      if (x == size) {
        $('#load-more').hide();
      }
    });

jsfiddle demo：https://jsfiddle.net/mrdoe/7smz31ad/

Answer 1

尝试在filters处理程序之外定义change，filters作为#load-more click处理程序选择器的一部分

＆＃13;

＆＃13;

var filters = "all", size = $(".all").length, x = 3;
$("select.filterby").change(function() {
  x = 3;
  filters = $.map($("select.filterby").toArray(), function(e) {
    return $(e).val();
  }).join(".");
  $("div#filter-content div").hide();
  $("div#filter-content div." + filters + ":lt("+x+")").show();
  size = $("#filter-content div." + filters).length;
  $("#load-more").show()
});

$("#filter-content div:lt(" + x + ")").show();
$("#load-more").click(function() {
  x = (x + 1 <= size) ? x + 1 : size;
  $("#filter-content div." + filters + ":lt(" + x + ")")
    .show(250, function() {
      if (x == size) {
        $("#load-more").hide(250);
        x = 3;
      }
    })
});

＆＃13;

#filter-content div {
  display: none;
}
#load-more {
  color: red;
  cursor: pointer;
}
#load-more:hover {
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
name:
<select class="filterby">
  <option value="all">all</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

type:
<select class="filterby">
  <option value="all">all</option>
  <option value="plastic">plastic</option>
  <option value="metal">metal</option>
  <option value="glass">glass</option>
</select>

<br>

<div id="filter-content">

  <div class="all 1 plastic">1 plastic</div>
  <div class="all 1 metal">1 metal</div>
  <div class="all 1 glass">1 glass</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 plastic">2 plastic</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 metal">2 metal</div>
  <div class="all 2 glass">2 glass</div>
  <div class="all 3 plastic">3 plastic</div>
  <div class="all 3 metal">3 metal</div>
  <div class="all 3 glass">3 glass</div>

</div>

<br>

<div id="load-more">Load more</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle https://jsfiddle.net/7smz31ad/6/