class 元素的单击显示不起作用

Question

我正在尝试获取首字母缩略词的描述 (tag===p)，以便在我按下按钮 (tag===button) 时显示：

function myFunction() {
  for (let i = 0; i > x.length; i++) {

    var x = [];
    x.push(document.getElementsByClassName("toggleAcronym"));
    for (let j = 0; j > x.length; j++)
      if (x[i][j].style.display === "none") {
        x[i][j].style.display = "block";
      }
  }
}

#p6Acronyms {
  width: 50%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
}

.toggleAcronym {
  display: none;
}

<!DOCTYPE HTML5>
<html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Intellectual Principles</title>
  <meta name="description" content="sats">
  <meta name="author" content="satser">
  <link rel="stylesheet" type="text/css" href="Principles.css">
  <script type="text/javascript" src="Principles.js"></script>
</head>

<body>

  <div id="p6Acronyms">
    <button onclick="myFunction()">RWE</button>
    <p class="toggleAcronym">Real World Example</p>
    <button onclick="myFunction()">CRUD</button>
    <p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="myFunction()">CNS</button>
    <p class="toggleAcronym">Central Nervous System</p>
    <button onclick="myFunction()">MPS</button>
    <p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="myFunction()">I.e.</button>
    <p class="toggleAcronym">In essence</p>
    <button onclick="myFunction()">ALAP</button>
    <p class="toggleAcronym">As Long As Possible</p>
    <button onclick="myFunction()">AMAP</button>
    <p class="toggleAcronym">As Much As Possible</p>
    <button onclick="myFunction()">CoC</button>
    <p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="myFunction()">RR(P)(F)-R</button>
    <p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="myFunction()">AoL</button>
    <p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="myFunction()">MBS</button>
    <p class="toggleAcronym">Mind Body & Spirit</p>
    <button onclick="myFunction()">QoC</button>
    <p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="myFunction()">PFC</button>
    <p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="myFunction()">SRV</button>
    <p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors directional effect on this.)</p>
    <button onclick="myFunction()">P/T-R</button>
    <p class="toggleAcronym">Practice/Theory-Ratio</p>
  </div>

</body>

</html>

我怀疑 JS 不正确，但不知道如何正确。我不知道如何将某个 class 的每个元素推送到一个数组，然后对于该数组中的每个元素，如果单击按钮，则显示段落。我是 JavaScript 的新手，不明白如何处理此错误消息：

"message": "Uncaught TypeError: Cannot read property 'length' of undefined"

，感谢您的帮助。

Answer 1

如果你想切换段落的文本，你不需要数组。您可以将 this 传递给 myFunction(this)。然后在函数中，切换 nextSibling 的 display 即段落：

function myFunction(elm) {
  var display = elm.nextSibling.style.display;
  if (display === "none" || display === "") {
    elm.nextSibling.style.display = "block";
  } else {
    elm.nextSibling.style.display = "none";
  }
}

#p6Acronyms {
  width: 50%;
  border: 1px solid blue;
  margin: 0 auto;
  padding: 20px;
}

.toggleAcronym {
  display: none;
}

<div id="p6Acronyms">
    <button onclick="myFunction(this)">RWE</button><p class="toggleAcronym">Real World Example</p>
    <button onclick="myFunction(this)">CRUD</button><p class="toggleAcronym">Create, Read, Update, Delete</p>
    <button onclick="myFunction(this)">CNS</button><p class="toggleAcronym">Central Nervous System</p>
    <button onclick="myFunction(this)">MPS</button><p class="toggleAcronym">Muscle Protein Synthesis</p>
    <button onclick="myFunction(this)">I.e.</button><p class="toggleAcronym">In essence</p>
    <button onclick="myFunction(this)">ALAP</button><p class="toggleAcronym">As Long As Possible</p>
    <button onclick="myFunction(this)">AMAP</button><p class="toggleAcronym">As Much As Possible</p>
    <button onclick="myFunction(this)">CoC</button><p class="toggleAcronym">Contents of Consciousness</p>
    <button onclick="myFunction(this)">RR(P)(F)-R</button><p class="toggleAcronym">Risk Reward (Probability)(Fragility) - Ratio</p>
    <button onclick="myFunction(this)">AoL</button><p class="toggleAcronym">Area of Life (=Intellectual, Physical, Relationships & Intellectual)</p>
    <button onclick="myFunction(this)">MBS</button><p class="toggleAcronym">Mind Body & Spirit</p>
    <button onclick="myFunction(this)">QoC</button><p class="toggleAcronym">Quality of Consciousness</p>
    <button onclick="myFunction(this)">PFC</button><p class="toggleAcronym">Pre-Frontal Cortex</p>
    <button onclick="myFunction(this)">SRV</button><p class="toggleAcronym">Survival & Reproduction Value. //(Often used to describe factors directional effect on this.)</p>
    <button onclick="myFunction(this)">P/T-R</button><p class="toggleAcronym">Practice/Theory-Ratio</p>
</div>

Answer 2

为每个段落添加 id 并将该 id 传递给 myFunction()

<button onclick="myFunction('RWE')">RWE</button><p id="RWE" class="toggleAcronym">Real World Example</p>

在我的函数中

    function myFunction(x) {
               if(document.getElementById(x).style.display === "block"){

                   document.getElementById(x).style.display = "none";
              }else{

                document.getElementById(x).style.display = "block";
              }
}

完美，我试过了

class 元素的单击显示不起作用

Onclick display of class elements not working

javascript

html

arrays

onclick

helper