javascript - 通过javascript切换显示/隐藏具有相同css类的所有段落

Question

作为一个 javascript 新手，我需要一些帮助。我正在构建具有某些多个元素（在我的情况下是圣经的不同翻译）的 html 页面，这些元素会根据用户的偏好进行切换。我需要通过单击按钮在“display：block”和“display：none”之间更改给定css类的显示属性。我当前的代码适用于更改 css 类中段落的第一个实例，但我想要的是能够通过单击按钮来更改 css 的所有实例的显示属性。我的研究告诉我，我的 javascript 中可能需要一个“for”循环，但我无法弄清楚如何编写和实现它的正确语法，以便按钮单击将显示/隐藏相同的所有实例css 类。这是我的代码：

<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 类的每个实例的显示属性？在此先感谢您帮助新手！

标签： javascriptcssfor-loop

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';
  }