javascript - 试图从选择选项中显示/隐藏 div 的数量

Question

我目前正在从事电子商务项目。

用户拥有的选项之一是通过下拉选择选项每页可以显示的产品数量。

如果用户在已经选择了较大的数字后选择较少的选项来显示，我不太确定如何删除显示的 div 数量。所以基本上，在这个阶段，我可以增加 div 的数量以随着数字的增加而出现，但我无法弄清楚的是如何将 div 重置回 css 显示:无，然后根据较小的显示它们选择的号码。我正在做的事情是行不通的。有什么建议吗？

我目前的代码如下所示。

var choices = document.getElementById("choice");
var divs = document.querySelectorAll(".section");
var btn = document.getElementById("button");
var numOfItems = document.getElementById("results");
var currentVal = 0;

choices.addEventListener("change", function() {
  $(".section").css("display", "none");
  currentVal = choices.options[choices.selectedIndex].value;
  for (var i = 0; i < currentVal; i++) {
    divs[i].style.display = "initial";
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>How many products would you like listed per page?</p>
<select id="choice">
  <option value="0"></option> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option> 
  <option value="5">5</option> 
</select>

<div id="results">
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
</div>

Answer 1

首先，您必须将 chnage 事件附加到 select，然后在每次更改时，您可以使用 .slice(0,currentVal) 来选择前 X 个元素，然后最后借助 show()/hide() 函数切换显示，例如:

$('#choice').on('change', function() {
  var currentVal = $(this).val();
  var sections  = $('.section');

  if (currentVal == 0) {
    sections.show();
  } else {
    sections.hide().slice(0, currentVal).show();
  }
});

注意:您不需要同时使用混合的 vanillaJS 和 jQuery，只需坚持使用其中之一即可。

希望这对您有所帮助。

$('#choice').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 0) {
    $('.section').show();
  } else {
    $('.section').hide().slice(0, currentVal).show();
  }
})

.section {
  width: 200px;
  height: 40px;
  background-color: green;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>How many products would you like listed per page?</p>
<select id="choice">
  <option value="0"></option> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option> 
  <option value="5">5</option> 
</select>

<div id="results">
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
</div>