尝试从 select 选项中获得 display/hide 个 div

Question

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

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

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

我目前的代码如下所示。

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

每次用户更改要显示的div数量时，您可以将所有div设置为"display: none;"。

那你就照你刚才的样子做吧。从多个 div 中删除 "display: none;"。

我会这样做： document.getElementsByTagName('div').style.display = "none";

那么代码应该是这样的：

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(){
document.getElementsByTagName('div').style.display = "none";
  $(".section").css("display","none");
      currentVal = choices.options[choices.selectedIndex].value;
      for (var i = 0; i < currentVal; i++){
      divs[i].style.display = "initial";
      }
    })

您可能只想在带有 class 的 div 上执行此操作，但这里我举了一个隐藏所有 div 的示例。

Answer 2

首先，您必须将 chnage 事件附加到 select，然后在每次更改时，您可以使用 .slice(0,currentVal) 到 select 前 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>

尝试从 select 选项中获得 display/hide 个 div

Trying to display/hide number of divs from select option

html

javascript

jquery

toggle