htmlクリックイベントでの切り替え機能

Question

私は単純な「もっと読む」ボタンをページに追加しようとしています。私は要素内で最大の文字を隠す作業関数を用意することができました。そして関数を呼び出すために、私は関数を呼び出すために "onclick"イベントでHTMLのボタンを用意しました。

これではいけないいくつかのことが起こります。ボタンは隠されたテキストを表示するはずですが、逆のことが起こります。ボタンをクリックするたびに、文字を15に制限するvarを持っていても、さらに多くの文字が削除されます。これがおそらく基本的なjQueryであることを理解するために。私が謝ったのは、私がここで間違っていることを誰かが指摘してくれることを願っています。

HTML：

<button class="content-toggle" onclick="textCollapse()">Read more</button> 

のjQuery：

function textCollapse() { 
    var limit = 15; 
    var chars = jQuery(".field-content p").text(); 
    if (chars.length > limit) { 
    var visiblePart = jQuery("<span class='visiblepart'> "+ chars.substr(0, limit) +"</span>"); 
    var dots = jQuery("<span class='dots'>... </span>"); 

    jQuery(".field-content p").toggle() 
     .empty() 
     .append(visiblePart) 
     .append(dots) 
    } 
}; 

Answer 1

私は外側の変数にフルテキストコンテンツを保存し、そこを続けるだろう。ボタンをクリックするたびにテキストコンテンツを再クエリーする必要はありません。また、テキストの状態を保存する変数を持つ方が良いでしょう。毎回比較するのではなく、折りたたまれているかどうかです。

var fullText = jQuery(".field-content p").text(); 
var collapsed = false; 

function textCollapse() { 
    var limit = 15; 
    if (collapsed) { 
     var visiblePart = jQuery("<span class='visiblepart'> " + fullText + "</span>"); 
     jQuery(".field-content p") 
       .empty() 
       .append(visiblePart) 

     collapsed = false; 
    } else { 
     var visiblePart = jQuery("<span class='visiblepart'> " + fullText.substr(0, limit) + "</span>"); 
     var dots = jQuery("<span class='dots'>... </span>"); 

     jQuery(".field-content p") 
       .empty() 
       .append(visiblePart) 
       .append(dots) 

     collapsed = true; 

    } 
} 

また、私はあなたがすべての操作が同期的に実行し、ノードを空にし、追加する前にp要素を非表示にする必要はありませんされているのでtoggle()を呼び出す必要はないと思います。