選択オプションからdiv数を表示/非表示しようとしています

Question

現在、私は電子商取引プロジェクトを行っています。

ユーザーが持つオプションの1つは、ドロップダウン選択オプションからページごとに表示できる製品の量です。

大きな数字がすでに選択された後に表示するオプションが少なくても、表示されるdivの数を削除する方法について少し不明です。だから、基本的には、この段階では、数字が上がるにつれて表示されるdivの数を増やすことができますが、私が理解できないのは、divをCSS表示に戻す方法です：none、それからless選択された番号。私がそれについて行く方法は機能していません。任意の誓い？

私がこれまでに持っていたコードを以下に示します。

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

まずあなたがして、すべてにあなたが最初のXの要素を選択する.slice(0,currentVal)を使用し、最終的に同様show()/hide()機能の助けを借りて、表示を切り替えることができ変更、selectにchnageイベントを添付する必要があります。

$('#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の両方を使用する必要はありません。そのうちの1つに固執するだけです。

これが役に立ちます。

$('#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>

Answer 2

ユーザーが表示するためのdivの数を変更するたびに、すべての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"; 
     } 
    }) 

あなたが唯一のクラスとdivの上でこれを実行する場合がありますが、ここで私はそれがすべてのdivを隠し例を行いました。