クリックに隠れていないテキスト

Question

私はそれぞれが異なる内容の段落をそれぞれ含む6つのボックスを持っています。文字数制限は200文字に設定されています。 200文字後、ユーザーがShow Moreリンクをクリックするまで、残りのコンテンツ（存在する場合）は非表示になります。

ユーザーがリンクをクリックすると、テキスト表示が文字制限に戻ります。しかし、そうではありません。ユーザーがShow Moreリンクをクリックすると、すべてのコンテンツが表示されますが、ユーザーがリンクをクリックすると、コンテンツは縮小しません。

コンテンツの表示と非表示に関する他のSO投稿を見ましたが、自分の問題を解決するために回答を実装した後、私はまだ失われています。これはjQueryを初めて実装したときの1つです。そのような初級レベルで私の混乱を許してください。

がコンテンツを契約していない理由についてのご意見をいただければ幸いです。

<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>