时间戳

首页 > 解决方案 > 多个 div 的 Readmore 按钮

javascript - 多个 div 的 Readmore 按钮

问题描述

我正在尝试让它每次按下“Lees meer”按钮时都会显示更多文本。下面的代码适用于 1，但是当我添加几个具有相同功能的 div 时，它不再工作了......有人可以帮我让它每次按下按钮时都会显示更多文本吗？

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }
}
#more {
  display: none;
}
<div class="spidermanMovie">
  <h2> Spider-man: Homecomming.</h2>
  <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the
    sixteenth film in the Marvel Cinematic Universe (MCU).
    <span id="dots">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p>
  <button onclick="myFunction()" id="myBtn">Lees meer</button>
  <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" />
</div>

<div class="deadpoolMovie">
  <h2> Spider-man: Homecomming.</h2>
  <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the
    sixteenth film in the Marvel Cinematic Universe (MCU).
    <span id="dots">...</span><span id="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p>
  <button onclick="myFunction()" id="myBtn">Lees meer</button>
  <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" />
</div>


<div class="thorMovie">
  <h2> Spider-man: Homecomming.</h2>
  <p>Deadpool is a 2016 American superhero film based on the Marvel Comics character of the same name. Distributed by 20th Century Fox, it is the eighth film in the X-Men film series and the first standalone Deadpool film.
    <span id="dots">...</span><span id="more"> Directed by Tim Miller from a screenplay by Rhett Reese and Paul Wernick, the film stars Ryan Reynolds as Wade Wilson / Deadpool alongside Morena Baccarin, Ed Skrein, T. J. Miller, Gina Carano and Brianna Hildebrand. In the film, Wilson—as the antihero Deadpool—hunts down the man who gave him mutant abilities and caused his scarred physical appearance.</span></p>
  <button onclick="myFunction()" id="myBtn">Lees meer</button>
  <img class="imageMovies" src="img/spidermanfilm.jpg" alt="" />
</div>

标签： javascripthtmlfunction

解决方案

document.getElementById()由正文中的方法引起的问题，该方法myFunction()执行查找单个匹配元素（在多个匹配的情况下为第一个）。

所以，你需要的是，基本上：

  • 从您的 HTML中删除 non-unique id（因为它违反了名称所暗示的此属性的唯一性）
  • 使用class属性来标记所有应该以相同方式表现的元素
  • event.target作为参数传递myFunction()以仅处理特定段落

该概念（为简单起见进行了修剪并尽可能接近您现有的代码库）看起来像：

function myFunction(p) {
  const parent = p.parentElement,
        moreText = parent.getElementsByClassName("more")[0],
        btnText = parent.getElementsByClassName("myBtn")[0],
        dots = parent.getElementsByClassName('dots')[0]

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }

}
.more {
  display: none;
}
<div id="spidermanMovie">
  <h2> Movie 1</h2>
  <p>Short story 1.
    <span class="dots">...</span><span class="more">The rest of story 1</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>

<div id="deadpoolMovie">
  <h2> Movie 2</h2>
  <p>Short story 2.
    <span class="dots">...</span><span class="more">The rest of story 2</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>


<div id="thorMovie">
  <h2>Movie 3</h2>
  <p>Short story 3.
    <span class="dots">...</span><span class="more">The rest of story 3</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>

但是，为了使您的 HTML 部分更简洁且更易于维护，我将使用附加到 JavaScript 文件中相应元素的onclick单个事件侦听器回调 ( ) 替换内联属性。EventTarget.addEventListener()

推荐阅读