通过单击超链接切换文本

toggle text by clicking on hyperlink

本文关键字：文本 超链接 单击      更新时间：2023-09-26

我需要在不隐藏任何禁用功能的情况下打开/关闭html中的文本。以下代码可以切换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>

我做错了什么？

首先对代码进行一些注释：

ID必须是唯一的！因此，请改用类。

我希望我正确理解您要实现的目标：

.HTML：

<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>

.JS

$('.displayText').on('click', function(e) {
  $(this).text(function(i, s) {
      return s === 'On' ? 'Off' : 'On';
    });
});

例

参考：

.text（）

相关文章：