Question

我希望我的“更多显示和隐藏”按钮适用于多种文本内容，现在仅适用于其中一种。我想使用12种不同的按钮来显示和隐藏12种不同的文本，例如代码中的一个。我该怎么做呢？

var content = document.getElementById("content");
var button = document.getElementById("show-more");

button.onclick = function() {

  if (content.className == "open") {
    //shrink the box
    content.className = "";
    button.innerHTML = "Läs mer";
  } else {
    //expand the box
    content.className = "open";
    button.innerHTML = "Dölj";
  }

};

<div id="content">
  Test
</div>

<a id="show-more">Läs mer</a>

Answer 1

使用class比id更好。我实现了一个简单的代码段，您可以在其中仅使用类名进行设计。

var content = document.getElementById("content");

$(".showHide").on("click", function() {
    $(this).parent().find(".more").toggle();
    if ($(this).parent().find(".more").is(":visible")) {
        $(this).text("Show less");
    } else {
        $(this).text("Show more");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div class="text">
        First text1
        <div style="display:none;" class="more">Other text 1</div>
        <a class="showHide" href="#">Show more</a>
    </div>
    <hr />
    <div class="text">
        First text2
        <div style="display:none;" class="more">Other text 2</div>
        <a class="showHide" href="#">Show more</a>
    </div>
</div>

Answer 2

HejLinnéa！

ID应该是唯一的，如果要多次出现，则应使用类名。

我要做的是将链接包装在容器div中；

<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>
<div class="content">
    Content
    <a class="toggle" href="#">Läs mer</a>
</div>

然后，不要将事件侦听器附加到每个锚元素，而要利用event propagation，然后将侦听器添加到每个内容包装器中；

document.querySelectorAll('.content').forEach(function(contentDiv) {
    contentDiv.onclick = function(e) {
        if(e.target.classList.contains('toggle')) {
            e.target.innerHTML = e.currentTarget.classList.contains('open') ? 'Dölj' : 'Läs mer';
            e.currentTarget.classList.toggle('open');
        }
    }
});

Answer 3

使用文档querySelectorAll

var content = Array.from(document.querySelectorAll(".container"));

content.forEach(function(el){
    //var content= el.querySelector(".content");
    var button = el.querySelector(".show-more");
    button.addEventListener("click", function () {
        el.classList.toggle("open");
        el.classList.contains("open") ? (button.innerHTML = "Dölj") : (button.innerHTML = "Läs mer");
           
    }, false)
});

.container .content{display: none}
.container.open .content{display: block}

<section>
  <article class="container">
      <p>Lorem Ipsum is simply dummy</p>
      <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="show-more">Läs mer</a>
  </article>

  <article class="container">
      <p>Lorem Ipsum is simply dummy</p>
      <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="show-more">Läs mer</a>
  </article>
  
   <article class="container">
      <p>Lorem Ipsum is simply dummy</p>
      <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="show-more">Läs mer</a>
  </article>
  
   <article class="container">
      <p>Lorem Ipsum is simply dummy</p>
      <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="show-more">Läs mer</a>
  </article>
  
</section>

Answer 4

如果对所有元素使用类，然后将其作为元素对（div +对应的button）进行处理，则可以使其适用于多个段落。

我特意将所有内容与您的原始代码保持尽可能的相同，因此很容易理解所做的更改。并且我添加了一些“隐藏”内容，以便您真正看到正在发生的事情。

var contentDivs = document.getElementsByClassName("content");
var buttons = document.getElementsByClassName("show-more");

for (var i = 0; i < contentDivs.length; i++) {
  // "let" creates locally scoped variables for use in the function.
  let div = contentDivs[i];
  let button = buttons[i];
  button.onclick = function() {
    if (div.className == "open") {
      //shrink the box
      div.className = "content";
      button.innerHTML = "Read more";
    } else {
      //expand the box
      div.className = "open";
      button.innerHTML = "Close";
    }
  };
}

div, a { font-size: 14px; }
.content { overflow: hidden; max-height: 18px }

<div class="content">
  Div 1<br />.....<br />.....<br />.....
</div>
<a class="show-more">Read more</a>
<hr size="1">

<div class="content">
  Div 2<br />.....<br />.....<br />.....
</div>
<a class="show-more">Read more</a>
<hr size="1">

多个显示和隐藏按钮

4 个答案: