时间戳

首页 > 解决方案 > 单击后显示多个按钮的文本

javascript - 单击后显示多个按钮的文本

问题描述

我有三个按钮，一旦单击，应该会显示一些文本。我尝试在 javascript 中执行此操作，但无论我单击哪个按钮，它都只向我显示其下方第一个按钮的文本。这是我为 javascript 和 html 编写的代码：

function toggleText() {
  var text = document.getElementById("demo");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
<div class="row">
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 1</a>
    <p id="demo" style="display: none">TEXT TEXT TEXT</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 2</a>
    <p id="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText()" class="btn btn-sm animated-button thar-two">Button 3</a>
    <p id="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p>
  </div>
</div>

我仍在学习 javascript，所以我需要帮助更改代码。提前非常感谢！

标签： javascripthtmljquery

解决方案

首先属性id在文档中应该是唯一的，你可以使用class属性来代替。

您可以将this对象传递给函数，以便您可以在单击时引用相应的元素。

演示：

function toggleText(el) {
  var text = el.closest('div').querySelector(".demo");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
<div class="row">
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 1</a>
    <p class="demo" style="display: none">TEXT TEXT TEXT</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 2</a>
    <p class="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" onclick="toggleText(this)" class="btn btn-sm animated-button thar-two">Button 3</a>
    <p class="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p>
  </div>
</div>

不过，我建议您避免使用内联事件处理程序，您可以使用EventTarget.addEventListener()附加事件：

function toggleText() {
  var text = this.closest('div').querySelector(".demo");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

var btnLinks = document.querySelectorAll('a.animated-button.thar-two');
btnLinks.forEach(function(btn){
   btn.addEventListener('click', toggleText);
});
<div class="row">
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 1</a>
    <p class="demo" style="display: none">TEXT TEXT TEXT</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 2</a>
    <p class="demo" style="display: none">TEXT 2 TEXT 2 TEXT 2</p>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6">
    <a href="javascript:void();" class="btn btn-sm animated-button thar-two">Button 3</a>
    <p class="demo" style="display: none">TEXT 3 TEXT 3 TEXT 3</p>
  </div>
</div>

推荐阅读