Текст не скрывается при нажатии

Question

У меня есть шесть ящиков, каждый из которых содержит один абзац, каждый с разным контентом. Ограничение персонажа задано до 200 символов. После 200 символов оставшийся контент (если есть) скрыт до тех пор, пока пользователь не нажмет на ссылку Show More.

Когда пользователь нажимает на ссылку , текстовое шоу возвращается к пределу символа. Однако это не так; когда пользователь нажимает ссылку Show More, отображается весь контент, но когда пользователь нажимает на ссылку , контент не сжимается.

Я видел другие сообщения о содержании и скрытии контента, но после выполнения их ответов в попытке решить мою проблему, я все еще теряюсь. Это один из моих первых случаев внедрения jQuery, поэтому, пожалуйста, извините мое замешательство на таком элементарном уровне.

Любые предложения относительно того, почему не подписывают содержание, оцениваются.

<div class="col-md-8" id="article"> 
    <?php 
     $text = $page->Article_Text; 
    ?> 

    <script> 
     $(document).ready(function(){ 
      var readMoreHTML = $(".read-more").html(); 
      var lessText = readMoreHTML.substr(0, 200); 

      if(readMoreHTML.length > 200){ 
       $(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>"); 
      } else{ 
       $(".read-more").html(readMoreHTML); 
      } 
      $("body").on("click", ".read-more-link", function(event){ 
       event.preventDefault(); 
       $(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>"); 
      }); 
       $("body").on("click", ".show-less-link", function(event){ 
       event.preventDefault(); 
       $(this).parent(".read-more").html(readMoreHTML.subtr(0,200)).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>"); 
      }); 
     }); 
    </script> 


    <div class="content"> 
     <div class="read-more"> 
      <?php echo $text ?> 
     </div> 
    </div> 

</div><!--#article--> 

(Прошу извинить встроенный CSS, поскольку он предназначен только для целей тестирования).

Answer 1

В последней части вашего JS просто используйте переменную lessText, и она будет работать. Метод jQuery .html() не может принимать readMoreHTML.subtr(0,200) в качестве входного сигнала.

$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>"); 

Работая codepen: http://codepen.io/staypuftman/pen/akZdzg

А также работает код прилагается здесь. вы можете проверить выход

$(document).ready(function() { 
 
     var readMoreHTML = $(".read-more").html(); 
 
     var lessText = readMoreHTML.substr(0, 200); 
 

 
     if (readMoreHTML.length > 200) { 
 
      $(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>"); 
 
     } else { 
 
      $(".read-more").html(readMoreHTML); 
 
     } 
 
     $("body").on("click", ".read-more-link", function (event) { 
 
      event.preventDefault(); 
 
      $(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>"); 
 
     }); 
 
     $("body").on("click", ".show-less-link", function (event) { 
 
      event.preventDefault(); 
 
      $(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="read-more"> 
 
    Details of G.M.’s decision-making process almost 20 years ago, which has not been reported previously, suggest that a quest for savings of just a few dollars per airbag compromised a critical safety device, resulting in passenger deaths. The findings also indicate that automakers played a far more active role in the prelude to the crisis: Rather than being the victims of Takata’s missteps, automakers pressed their suppliers to put cost before all else. 
 
</div>