javascript - 我如何按类别而不是全部收集 "load more"数据

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>

这里是js

 $("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 演示:https://jsfiddle.net/mrdoe/7smz31ad/

Answer 1

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

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;
      }
    })
});

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

<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>

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