Question

我目前正在开展电子商务项目。

用户拥有的其中一个选项是下拉选择选项中每页可显示的产品数量。

如果用户在选择了较大的数字后选择较少的选项，我对如何删除显示的div数量有点不确定。所以基本上，在这个阶段，我可以增加div的数量，以显示数字越来越高，但我无法弄清楚如何将div重置为css 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() {
  $(".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事件附加到/submit?user.name=Jack&user.age=26&order.price=100&order.quantity=2，然后在每次更改时都可以使用select来选择前X个元素，最后在{{1}的帮助下切换显示函数如：

.slice(0,currentVal)

注意：您不需要使用混合的vanillaJS和jQuery，只需坚持使用其中一个。

希望这有帮助。

＆＃13;

show()/hide()

＆＃13;

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

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

＆＃13;

$('#choice').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 0) {
    $('.section').show();
  } else {
    $('.section').hide().slice(0, currentVal).show();
  }
})

＆＃13;

Answer 2

每次用户更改要显示的div数时，您都可以将所有div设置为“display：none;”。

然后你可以像你一样做。删除“display：none;”来自一些div。

我会这样做： 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";
      }
    })

你可能只想在带有类的div上做这个，但是在这里我做了一个隐藏所有div的例子。

尝试显示/隐藏选择选项中的div数

2 个答案: