类元素的点击显示不起作用答案

【问题标题】：Onclick display of class elements not working类元素的点击显示不起作用
【发布时间】：2018-11-24 11:26:45
【问题描述】：

我试图在按下按钮 (tag===button) 时显示首字母缩略词 (tag===p) 的描述：

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

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

，谢谢你的帮助。

【问题讨论】：

您需要在此行for (let i=0; i>x.length; i++) { 中定义变量x，但您在此行var x=[] 中已经有一个x 变量

标签： javascript html arrays onclick helper

【解决方案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>

【讨论】：

您的代码没有运行并出现错误消息“未捕获的类型错误：无法读取未定义的属性‘显示’”
太好了，谢谢，没有用“this”作为这样的函数参数，非常有帮助。
@Ronnlidd 欢迎您。如果此答案帮助您解决了问题，请随时将其标记为已接受。

【解决方案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";
              }
}

效果很好，我试过了

【讨论】：

谢谢，由于代码更易读，我更喜欢 The Fourth Birds 的回答。