如何为同一页面创建多个“多读”和“少读”按钮？

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它适用于第一段，但不适用于第二段，你能告诉我为什么或者是否有更好的方法来做到这一点吗？谢谢

Answer 1

首先 - 不要多次使用相同的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>

Answer 2

我正在考虑一种不同的方法，也许在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>