如何为同一页创建多个读越多越少的按钮？

Question

我正在做一个相当大的项目，我在读更多的按钮上遇到了麻烦，我对javascript非常陌生，而且我仍然试图把我的头挪开。我有第一个按钮的功能，但其他按钮不工作，你能告诉我我做错了什么吗？

​

$(document).ready(function() {
  $("#read").click(function() {
    $(this).prev().toggle();
    $(this).siblings('.dots').
    toggle("read");
    if ($(this).text() == 'Read More') {
      $(this).text('Read Less');
    } else {
      $(this).text('Read More');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The Hound Group</h1>
<div class="container">
  <h3>The Sighthounds</h3>
  <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by sight and speed rather than by scent because of this they are sometimes refered to as Gazehounds. Because sighthounds hunt by sight, they need to have the speed and agility to keep
    up with their prey in order to keep them in sight. Sighthound breeds typically have lean bodies, long legs, and a flexible back – they also have deep chests to support their unusually large hearts and lungs. To help you picture the typical sighthound
    body, here is a list of breeds that are categorized as sighthounds:

    <h4>Afghan Hound:</h4>
    <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
      such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
      <span class="dots">...</span>

      <div class="showmore">
        <h5>Origin</h5>
        Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
        with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
        horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
    </p>
    </div>
    <button type="button" id="read" class="btn btn-info btn-xs">Read More</button>

    <h4>Azwakah:</h4>
    <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot heckin mlem smol borking doggo with a long snoot for pats. Heck I am bekom fat pupperino borkdrive length boy,
      such treat maximum borkdrive wow very biscit. Borking doggo clouds much ruin diet pupperino tungg super chub, very hand that feed shibe you are doin me a concern boofers
      <span class="dots">...</span>

      <div class="showmore">
        <h5>Origin</h5>
        Doggo ipsum smol borking doggo with a long snoot for pats bork mlem heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. Ur givin me a spook smol borking doggo
        with a long snoot for pats big ol pupper long bois ur givin me a spook bork smol adorable doggo, the neighborhood pupper doing me a frighten puggorino tungg ur givin me a spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle
        horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you are doing me a frighten boof pats, noodle horse extremely cuuuuuute you are doing me the shock borkf, boof borkf.
    </p>
    </div>
    <button type="button" id="read" class="btn btn-info btn-xs">Read More</button>

​

它适用于第一段，而不是第二段，你能告诉我为什么或者如果有更好的方法来做到这一点吗？谢谢

Answer 1

我在想一种不同的方法，也许在JS中使用制表符。我用您的实际内容编辑了这个片段，这样您就可以看到它是如何显示的。参考资料：https://www.w3schools.com/howto/howto_js_tabs.asp

​

function openDef(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
  <button class="tablinks" onclick="openDef(event, 'Sighthounds')">Sighthounds</button>
  <button class="tablinks" onclick="openDef(event, 'Origin')">Origin</button>
</div>

<div id="Sighthounds" class="tabcontent">
  <h3>Sighthounds</h3>
    <h3>The Sighthounds</h3>
      <p>
      By definition, a sighthound is simply a dog breed that hunts primarily by 
      sight and speed rather than by scent because of this they are sometimes 
      refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
      have the speed and agility to keep up with their prey in order to keep 
      them in sight. Sighthound breeds typically have lean bodies, long legs, 
      and a flexible back – they also have deep chests to support their 
      unusually large hearts and lungs. To help you picture the typical 
      sighthound body, here is a list of breeds that are categorized as 
      sighthounds:

    <h4>Afghan Hound:</h4>
      <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many 
      pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober, 
      snoot heckin mlem smol borking doggo with a long snoot for pats. Heck 
      I am bekom fat pupperino borkdrive length boy, such treat maximum 
      borkdrive wow very biscit. Borking doggo clouds much ruin diet 
      pupperino tungg super chub, very hand that feed shibe you are doin me 
      a concern boofers

      <span class="dots">...</span>
</div>

<div id="Origin" class="tabcontent">
  <h3>Origin</h3>
    <h5>Origin</h5>
      <p>
      Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
      heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
      angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
      Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
      pupper long bois ur givin me a spook bork smol adorable doggo, the 
      neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
      spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
      horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
      are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
      are doing me the shock borkf, boof borkf.
     </p>

    <h4>Azwakah:</h4>
      <p>
      Wow very biscit stop it fren very hand that feed shibe heckin, many pats. 
      Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot 
      heckin mlem smol borking doggo with a long snoot for pats. Heck I am 
      bekom fat pupperino borkdrive length boy, such treat maximum borkdrive 
      wow very biscit. Borking doggo clouds much ruin diet pupperino tungg 
      super chub, very hand that feed shibe you are doin me a concern 
      boofers
      <span class="dots">...</span> 
</div>

​

Answer 2

首先-不要多次使用相同的id。我是说id="read" -复制是错误的。第二，元素的结构需要更多的分离。每个逻辑块都应该包含在它自己的父元素中。试试这个：

​

$(document).ready(function(){
   $(".read").click(function(){
      $(this).parent().find('.showmore').toggle();
        if($(this).text() =='Read More'){
          $(this).text('Read Less');
        }
        else{
          $(this).text('Read More');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-container">
  <div class="first">
    <h3>The Sighthounds</h3>
    <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by 
    sight and speed rather than by scent because of this they are sometimes 
    refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
    have the speed and agility to keep up with their prey in order to keep 
    them in sight. Sighthound breeds typically have lean bodies, long legs, 
    and a flexible back – they also have deep chests to support their 
    unusually large hearts and lungs. To help you picture the typical 
    sighthound body, here is a list of breeds that are categorized as 
    sighthounds:
    </p>
    <span class="dots">...</span>
  </div>
  <div class="showmore" style="display: none;">
   <h5>Origin</h5>
   <p>
    Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
    heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
    angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
    Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
    pupper long bois ur givin me a spook bork smol adorable doggo, the 
    neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
    spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
    horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
    are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
    are doing me the shock borkf, boof borkf.
   </p>
  </div>
  <button type="button" class="read btn btn-info btn-xs">Read More</button>
</div>

<div class="toggle-container">
  <div class="first">
    <h3>The Sighthounds</h3>
    <p>
    By definition, a sighthound is simply a dog breed that hunts primarily by 
    sight and speed rather than by scent because of this they are sometimes 
    refered to as Gazehounds. Because sighthounds hunt by sight, they need to 
    have the speed and agility to keep up with their prey in order to keep 
    them in sight. Sighthound breeds typically have lean bodies, long legs, 
    and a flexible back – they also have deep chests to support their 
    unusually large hearts and lungs. To help you picture the typical 
    sighthound body, here is a list of breeds that are categorized as 
    sighthounds:
    </p>
    <span class="dots">...</span>
  </div>
  <div class="showmore" style="display: none;">
   <h5>Origin</h5>
   <p>
    Doggo ipsum smol borking doggo with a long snoot for pats bork mlem 
    heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most 
    angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol. 
    Ur givin me a spook smol borking doggo with a long snoot for pats big ol 
    pupper long bois ur givin me a spook bork smol adorable doggo, the 
    neighborhood pupper doing me a frighten puggorino tungg ur givin me a 
    spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle 
    horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you 
    are doing me a frighten boof pats, noodle horse extremely cuuuuuute you 
    are doing me the shock borkf, boof borkf.
   </p>
  </div>
  <button type="button" class="read btn btn-info btn-xs">Read More</button>
</div>

​