html中多个“显示更多”按钮的JS代码答案

【问题标题】：JS code for multiple "Show more" buttons in htmlhtml中多个“显示更多”按钮的JS代码
【发布时间】：2021-05-13 07:10:43
【问题描述】：

我一直在尝试在基于 html 的网络应用程序上使用多个“显示更多”按钮。为此，我尝试了不同的 JS 函数，但我在某个地方出错了。目前，只有一个“显示更多”在工作。我的代码如下。请帮我解决此代码的正确解决方案。

function myFunction6() {
  var dots = document.getElementById("dots6");
  var moreText = document.getElementById("more6");
  var btnText = document.getElementById("button6");
  //   var btnText1 = document.getElementById("button6");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Show more";
    // btnText1.innerHTML = "Show more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Show less";
    // btnText1.innerHTML = "Show less"; 
    moreText.style.display = "inline";
  }
}

#button6 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

#button6:hover {
  background-color: #555;
}

#more6 {
  display: none;
}

<div class="card6">
  <p>Before show more 1</p>
  <span id="dots6"></span>

  <span id="more6">
                <p>
                   After Show more 1
                </p>
            </span>
  <p><button onclick="myFunction6()" id="button6">Show more</button></p>

</div>


<div class="card6">
  <p> Before Show more</p>
  <span id="dots6"></span>

  <span id="more6">
                <p>
                  After show mor
                </p>
            </span>

  <p><button onclick="myFunction6()" id="button6">Show more</button></p>
</div>

【问题讨论】：

你会用jquery吗？

标签： javascript html jquery css frontend

【解决方案1】：

请注意，页面上具有相同 id 的元素很少，document.getElementById 获得第一个条目。这就是为什么无论您单击哪个按钮，只有第一个块会被展开/折叠。

我已修改您的代码以在单击按钮时获取父级 .card6 容器。然后您可以使用querySelector 方法在该容器中获取具有特定id 的元素。

function myFunction6(event) {
  var card = event.target.closest(".card6");
  var dots = card.querySelector("#dots6");
  var moreText = card.querySelector("#more6");
  var btnText = card.querySelector("#button6");
  //   var btnText1 = document.getElementById("button6");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Show more";
    // btnText1.innerHTML = "Show more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Show less";
    // btnText1.innerHTML = "Show less"; 
    moreText.style.display = "inline";
  }
}

#button6 {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

#button6:hover {
  background-color: #555;
}

#more6 {
  display: none;
}

<div class="card6">
  <p>Before show more 1</p>
  <span id="dots6"></span>

  <span id="more6">
                <p>
                   After Show more 1
                </p>
            </span>
  <p><button onclick="myFunction6(event)" id="button6">Show more</button></p>

</div>


<div class="card6">
  <p> Before Show more</p>
  <span id="dots6"></span>

  <span id="more6">
                <p>
                  After show mor
                </p>
            </span>

  <p><button onclick="myFunction6(event)" id="button6">Show more</button></p>
</div>

【讨论】：

【解决方案2】：

id 对于所有组件必须是唯一的。当您为多个元素使用相同的 id 并调用 getById 时，JS 将只返回第一个元素.. 您永远不应该为多个元素提供相同的 id。你可以做的是通过事件来获取你的目标元素。即

function myFunction6(event) {
  let btnText = event.target; // element that was clicked
  let parent = btnText.parentElement; // its parent
  let siblings = parent.children; // collection of siblings
  var dots = siblings[1]; // 2nd element in the parent container
  var moreText = siblings[2]; // 3rd element in the parent container
  //   var btnText1 = document.getElementById("button6");

  ...

}

这使函数在被点击的元素之后保持动态。

【讨论】：

感谢您的建议和解决方案