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

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(){&nbsp; &nbsp;$(".read").click(function(){&nbsp; &nbsp; &nbsp; $(this).parent().find('.showmore').toggle();&nbsp; &nbsp; &nbsp; &nbsp; if($(this).text() =='Read More'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text('Read Less');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text('Read More');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="toggle-container">&nbsp; <div class="first">&nbsp; &nbsp; <h3>The Sighthounds</h3>&nbsp; &nbsp; <p>&nbsp; &nbsp; By definition, a sighthound is simply a dog breed that hunts primarily by&nbsp;&nbsp; &nbsp; sight and speed rather than by scent because of this they are sometimes&nbsp;&nbsp; &nbsp; refered to as Gazehounds. Because sighthounds hunt by sight, they need to&nbsp;&nbsp; &nbsp; have the speed and agility to keep up with their prey in order to keep&nbsp;&nbsp; &nbsp; them in sight. Sighthound breeds typically have lean bodies, long legs,&nbsp;&nbsp; &nbsp; and a flexible back – they also have deep chests to support their&nbsp;&nbsp; &nbsp; unusually large hearts and lungs. To help you picture the typical&nbsp;&nbsp; &nbsp; sighthound body, here is a list of breeds that are categorized as&nbsp;&nbsp; &nbsp; sighthounds:&nbsp; &nbsp; </p>&nbsp; &nbsp; <span class="dots">...</span>&nbsp; </div>&nbsp; <div class="showmore" style="display: none;">&nbsp; &nbsp;<h5>Origin</h5>&nbsp; &nbsp;<p>&nbsp; &nbsp; Doggo ipsum smol borking doggo with a long snoot for pats bork mlem&nbsp;&nbsp; &nbsp; heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most&nbsp;&nbsp; &nbsp; angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol.&nbsp;&nbsp; &nbsp; Ur givin me a spook smol borking doggo with a long snoot for pats big ol&nbsp;&nbsp; &nbsp; pupper long bois ur givin me a spook bork smol adorable doggo, the&nbsp;&nbsp; &nbsp; neighborhood pupper doing me a frighten puggorino tungg ur givin me a&nbsp;&nbsp; &nbsp; spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle&nbsp;&nbsp; &nbsp; horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you&nbsp;&nbsp; &nbsp; are doing me a frighten boof pats, noodle horse extremely cuuuuuute you&nbsp;&nbsp; &nbsp; are doing me the shock borkf, boof borkf.&nbsp; &nbsp;</p>&nbsp; </div>&nbsp; <button type="button" class="read btn btn-info btn-xs">Read More</button></div><div class="toggle-container">&nbsp; <div class="first">&nbsp; &nbsp; <h3>The Sighthounds</h3>&nbsp; &nbsp; <p>&nbsp; &nbsp; By definition, a sighthound is simply a dog breed that hunts primarily by&nbsp;&nbsp; &nbsp; sight and speed rather than by scent because of this they are sometimes&nbsp;&nbsp; &nbsp; refered to as Gazehounds. Because sighthounds hunt by sight, they need to&nbsp;&nbsp; &nbsp; have the speed and agility to keep up with their prey in order to keep&nbsp;&nbsp; &nbsp; them in sight. Sighthound breeds typically have lean bodies, long legs,&nbsp;&nbsp; &nbsp; and a flexible back – they also have deep chests to support their&nbsp;&nbsp; &nbsp; unusually large hearts and lungs. To help you picture the typical&nbsp;&nbsp; &nbsp; sighthound body, here is a list of breeds that are categorized as&nbsp;&nbsp; &nbsp; sighthounds:&nbsp; &nbsp; </p>&nbsp; &nbsp; <span class="dots">...</span>&nbsp; </div>&nbsp; <div class="showmore" style="display: none;">&nbsp; &nbsp;<h5>Origin</h5>&nbsp; &nbsp;<p>&nbsp; &nbsp; Doggo ipsum smol borking doggo with a long snoot for pats bork mlem&nbsp;&nbsp; &nbsp; heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most&nbsp;&nbsp; &nbsp; angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol.&nbsp;&nbsp; &nbsp; Ur givin me a spook smol borking doggo with a long snoot for pats big ol&nbsp;&nbsp; &nbsp; pupper long bois ur givin me a spook bork smol adorable doggo, the&nbsp;&nbsp; &nbsp; neighborhood pupper doing me a frighten puggorino tungg ur givin me a&nbsp;&nbsp; &nbsp; spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle&nbsp;&nbsp; &nbsp; horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you&nbsp;&nbsp; &nbsp; are doing me a frighten boof pats, noodle horse extremely cuuuuuute you&nbsp;&nbsp; &nbsp; are doing me the shock borkf, boof borkf.&nbsp; &nbsp;</p>&nbsp; </div>&nbsp; <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.aspfunction openDef(evt, cityName) {&nbsp; var i, tabcontent, tablinks;&nbsp; tabcontent = document.getElementsByClassName("tabcontent");&nbsp; for (i = 0; i < tabcontent.length; i++) {&nbsp; &nbsp; tabcontent[i].style.display = "none";&nbsp; }&nbsp; tablinks = document.getElementsByClassName("tablinks");&nbsp; for (i = 0; i < tablinks.length; i++) {&nbsp; &nbsp; tablinks[i].className = tablinks[i].className.replace(" active", "");&nbsp; }&nbsp; document.getElementById(cityName).style.display = "block";&nbsp; evt.currentTarget.className += " active";}.tab {&nbsp; overflow: hidden;&nbsp; border: 1px solid #ccc;&nbsp; background-color: #f1f1f1;}.tab button {&nbsp; background-color: inherit;&nbsp; float: left;&nbsp; border: none;&nbsp; outline: none;&nbsp; cursor: pointer;&nbsp; padding: 14px 16px;&nbsp; transition: 0.3s;&nbsp; font-size: 17px;}.tab button:hover {&nbsp; background-color: #ddd;}.tab button.active {&nbsp; background-color: #ccc;}.tabcontent {&nbsp; display: none;&nbsp; padding: 6px 12px;&nbsp; border: 1px solid #ccc;&nbsp; border-top: none;}<div class="tab">&nbsp; <button class="tablinks" onclick="openDef(event, 'Sighthounds')">Sighthounds</button>&nbsp; <button class="tablinks" onclick="openDef(event, 'Origin')">Origin</button></div><div id="Sighthounds" class="tabcontent">&nbsp; <h3>Sighthounds</h3>&nbsp; &nbsp; <h3>The Sighthounds</h3>&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; By definition, a sighthound is simply a dog breed that hunts primarily by&nbsp;&nbsp; &nbsp; &nbsp; sight and speed rather than by scent because of this they are sometimes&nbsp;&nbsp; &nbsp; &nbsp; refered to as Gazehounds. Because sighthounds hunt by sight, they need to&nbsp;&nbsp; &nbsp; &nbsp; have the speed and agility to keep up with their prey in order to keep&nbsp;&nbsp; &nbsp; &nbsp; them in sight. Sighthound breeds typically have lean bodies, long legs,&nbsp;&nbsp; &nbsp; &nbsp; and a flexible back – they also have deep chests to support their&nbsp;&nbsp; &nbsp; &nbsp; unusually large hearts and lungs. To help you picture the typical&nbsp;&nbsp; &nbsp; &nbsp; sighthound body, here is a list of breeds that are categorized as&nbsp;&nbsp; &nbsp; &nbsp; sighthounds:&nbsp; &nbsp; <h4>Afghan Hound:</h4>&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Wow very biscit stop it fren very hand that feed shibe heckin, many&nbsp;&nbsp; &nbsp; &nbsp; pats. Shooberino h*ck blep shoob sub woofer very taste wow shoober,&nbsp;&nbsp; &nbsp; &nbsp; snoot heckin mlem smol borking doggo with a long snoot for pats. Heck&nbsp;&nbsp; &nbsp; &nbsp; I am bekom fat pupperino borkdrive length boy, such treat maximum&nbsp;&nbsp; &nbsp; &nbsp; borkdrive wow very biscit. Borking doggo clouds much ruin diet&nbsp;&nbsp; &nbsp; &nbsp; pupperino tungg super chub, very hand that feed shibe you are doin me&nbsp;&nbsp; &nbsp; &nbsp; a concern boofers&nbsp; &nbsp; &nbsp; <span class="dots">...</span></div><div id="Origin" class="tabcontent">&nbsp; <h3>Origin</h3>&nbsp; &nbsp; <h5>Origin</h5>&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Doggo ipsum smol borking doggo with a long snoot for pats bork mlem&nbsp;&nbsp; &nbsp; &nbsp; heckin much ruin diet lotsa pats I am bekom fat, doing me a frighten most&nbsp;&nbsp; &nbsp; &nbsp; angery pupper I have ever seen pats waggy wags vvv. big ol pupper big ol.&nbsp;&nbsp; &nbsp; &nbsp; Ur givin me a spook smol borking doggo with a long snoot for pats big ol&nbsp;&nbsp; &nbsp; &nbsp; pupper long bois ur givin me a spook bork smol adorable doggo, the&nbsp;&nbsp; &nbsp; &nbsp; neighborhood pupper doing me a frighten puggorino tungg ur givin me a&nbsp;&nbsp; &nbsp; &nbsp; spook. Blep the neighborhood pupper heckin good boys big ol pupper noodle&nbsp;&nbsp; &nbsp; &nbsp; horse, doge big ol blep. noodle horse shibe maximum borkdrive. Bork you&nbsp;&nbsp; &nbsp; &nbsp; are doing me a frighten boof pats, noodle horse extremely cuuuuuute you&nbsp;&nbsp; &nbsp; &nbsp; are doing me the shock borkf, boof borkf.&nbsp; &nbsp; &nbsp;</p>&nbsp; &nbsp; <h4>Azwakah:</h4>&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Wow very biscit stop it fren very hand that feed shibe heckin, many pats.&nbsp;&nbsp; &nbsp; &nbsp; Shooberino h*ck blep shoob sub woofer very taste wow shoober, snoot&nbsp;&nbsp; &nbsp; &nbsp; heckin mlem smol borking doggo with a long snoot for pats. Heck I am&nbsp;&nbsp; &nbsp; &nbsp; bekom fat pupperino borkdrive length boy, such treat maximum borkdrive&nbsp;&nbsp; &nbsp; &nbsp; wow very biscit. Borking doggo clouds much ruin diet pupperino tungg&nbsp;&nbsp; &nbsp; &nbsp; super chub, very hand that feed shibe you are doin me a concern&nbsp;&nbsp; &nbsp; &nbsp; boofers&nbsp; &nbsp; &nbsp; <span class="dots">...</span>&nbsp;</div>