通过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 类的每个实例的显示属性？提前感谢您帮助新手！

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>