通過 javascript 顯示/隱藏具有相同 css class 的所有段落

Question

作為一個 javascript 新手，我需要一些幫助。 我正在構建 html 頁面，這些頁面具有根據用戶偏好切換的某些多個元素（在我的情況下，是聖經的不同翻譯）。 我需要通過單擊按鈕在“display:block”和“display:none”之間更改給定 css class 的顯示屬性。 我當前的代碼適用於更改 css class 中段落的第一個實例，但我想要的是能夠通過單擊按鈕更改 css 的所有實例的顯示屬性。 我的研究告訴我，我的 javascript 中可能需要一個“for”循環，但我無法弄清楚如何編寫和實現它的正確語法，以便按鈕單擊將顯示/隱藏相同的所有實例css class。 這是我的代碼：

<style>
p.niv {display:block;}
p.esv {display:none;}
p.kjv {display:none;}
</style>

<p>Click the buttons to display your preferred Bible version:</p>

<button onclick="niv()">NIV</button>
<button onclick="kjv()">KJV</button>
<button onclick="esv()">ESV</button>

<p>Regular paragraph, blah blah</p>
<p class="niv">this NIV paragraph will become hidden when the KJV or ESV button is clicked</p>
<p class="niv">but this NIV paragraph stays visible even though I want it to be hidden too</p>
<p class="kjv">this KJV paragraph will become hidden when the NIV or ESV button is clicked</p>
<p class="kjv">but this KJV paragraph stays visible even though I want it to be hidden too</p>
<p class="esv">this ESV paragraph will become hidden when the KJV or NIV button is clicked</p>
<p class="esv">but this ESV paragraph stays visible even though I want it to be hidden too</p>

<script>
    var n = document.getElementsByClassName("niv") [0];
    var k = document.getElementsByClassName("kjv") [0] ;
    var e = document.getElementsByClassName("esv") [0];
         
function niv() {

    n.style.display = "block";
    k.style.display = "none";
    e.style.display = "none";
  }

function kjv() {
 
    n.style.display = "none";
    k.style.display = "block";
    e.style.display = "none";    
  }

function esv() {
  
    n.style.display = "none";
    k.style.display = "none";
    e.style.display = "block";
  }

</script>

如何循環我的 javascript 函數來更改 css class 的每個實例的顯示屬性？ 在此先感謝您幫助新手！

Answer 1

我建議不要選擇所有段落並遍歷它們，而是將該工作委托給瀏覽器。 因此，您可以將段落包裝在容器中並使用其類名進行操作。

<p>Click the buttons to display your preferred Bible version:</p>

<button onclick="changeVersion('niv')">NIV</button>
<button onclick="changeVersion('kjv')">KJV</button>
<button onclick="changeVersion('esv')">ESV</button>

<p>Regular paragraph, blah blah</p>

<div id='container' class='niv-active'>
    <p class="niv">this NIV paragraph will become hidden when the KJV or ESV button is clicked</p>
    <p class="niv">but this NIV paragraph stays visible even though I want it to be hidden too</p>
    <p class="kjv">this KJV paragraph will become hidden when the NIV or ESV button is clicked</p>
    <p class="kjv">but this KJV paragraph stays visible even though I want it to be hidden too</p>
    <p class="esv">this ESV paragraph will become hidden when the KJV or NIV button is clicked</p>
    <p class="esv">but this ESV paragraph stays visible even though I want it to be hidden too</p>
</div>

.niv, .esv, .kjv {
  display: none;
}
#container.niv-active .niv {
  display: block;
}
#container.kjv-active .kjv {
  display: block;
}
#container.esv-active .esv {
  display: block;
}

const container = document.getElementById("container");
         
function changeVersion(v) {
    container.className = v + '-active';
  }

Answer 2

我可以建議一種不同的方法，需要更少的代碼行嗎？

 <style> /*1. you create a single class whose only purpose is to hide the element*/.hide { display: none; } </style> <p>Click the buttons to display your preferred Bible version:</p> <button onclick="showVersion('.niv')">NIV</button> <button onclick="showVersion('.kjv')">KJV</button> <button onclick="showVersion('.esv')">ESV</button> <p>Regular paragraph, blah blah</p> <p class="niv">this NIV paragraph will become hidden when the KJV or ESV button is clicked</p> <p class="niv">but this NIV paragraph stays visible even though I want it to be hidden too</p> <p class="kjv hide">this KJV paragraph will become hidden when the NIV or ESV button is clicked</p> <p class="kjv hide">but this KJV paragraph stays visible even though I want it to be hidden too</p> <p class="esv hide">this ESV paragraph will become hidden when the KJV or NIV button is clicked</p> <p class="esv hide">but this ESV paragraph stays visible even though I want it to be hidden too</p> <script> /* 2. you create a single function that hides all versions but the selected one */ function showVersion(selector) { // first hide all versions... document.querySelectorAll('.niv, .kjv, .esv').forEach(elem => elem.classList.add('hide')); //... then show only the desired one document.querySelectorAll(selector).forEach(elem => elem.classList.remove('hide')); } </script>

Answer 3

如果您是初學者，您應該嘗試使用此代碼 @secan 使用 ES6，這對於新手來說不容易理解

 var n = document.getElementsByClassName("niv"); var k = document.getElementsByClassName("kjv"); var e = document.getElementsByClassName("esv"); //This hideTag and showTag is use to hide your niv,kjv,esv function hideTag(tagName) { for(let i=0;i<tagName.length;i++){ tagName[i].style.display = 'none' } } function showTag(tagName) { for(let i=0;i<tagName.length;i++){ tagName[i].style.display = 'block' } } function niv() { showTag(n) hideTag(k) hideTag(e) } function kjv() { showTag(k) hideTag(n) hideTag(e) } function esv() { showTag(e) hideTag(k) hideTag(n) }

 p.niv {display:block;} p.esv {display:none;} p.kjv {display:none;}

 <p>Click the buttons to display your preferred Bible version:</p> <button onclick="niv()">NIV</button> <button onclick="kjv()">KJV</button> <button onclick="esv()">ESV</button> <p>Regular paragraph, blah blah</p> <p class="niv">this NIV paragraph will become hidden when the KJV or ESV button is clicked</p> <p class="niv">but this NIV paragraph stays visible even though I want it to be hidden too</p> <p class="kjv">this KJV paragraph will become hidden when the NIV or ESV button is clicked</p> <p class="kjv">but this KJV paragraph stays visible even though I want it to be hidden too</p> <p class="esv">this ESV paragraph will become hidden when the KJV or NIV button is clicked</p> <p class="esv">but this ESV paragraph stays visible even though I want it to be hidden too</p>