Question

我需要在html中切换文本on / Off，而不隐藏任何禁用的功能。以下代码可以切换on和off，但问题是：

如果不隐藏另一个单词，则无法切换。即当我按下它时，它会隐藏“关闭”功能。
当我为其他订单项添加切换方法时，它只会切换第一个订单项。因此，如果我将它添加到原始行五行之外的行项目并不重要，它只会触发原始行。

function toggle() {
  var ele = document.getElementById("toggleText");
  var text = document.getElementById("displayText");
  if (ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "On";
  } else {
    ele.style.display = "block";
    text.innerHTML = "Turn Off";
  }
}

 <h1>Services</h1>

<h2>Subscribed Services</h2>

<ul>
  <li>Geolocation -<a id="displayText" href="javascript:toggle();">On</a> 

    <div id="toggleText" style="display: none"></div>
  </li>

  <li>E-Mail Messaging -<a id="displayText" href="javascript:toggle();">On</a>

    <div id="toggleText" style="display: none"></div>
  </li>
</ul>

我做错了什么？

Answer 1

首先是代码的一些注释：

ID必须为unique！所以请改用类。

我希望我能正确理解你想要实现的目标：

HTML：

<div class="block">
  <h3>Something</h3>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
  <br>
  <h4>Some other heading</h4>
</div>

JS

<h2>Subscribed Services</h2>
<ul>
  <li>Geolocation -<a class="displayText" href="javascript:void(0);">On</a>
  </li>
  <li>E-Mail Messaging -<a class="displayText" href="javascript:void(0);">On</a>
  </li>
</ul>

Example

参考：

.text()

通过单击超链接切换文本

1 个答案: