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

Question

我一直在尝试在基于 html 的 Web 应用程序上使用多个“显示更多”按钮。为此，我尝试了不同的 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>

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