-1

段落の切り詰め用の小さなjquery関数を作成しました。しかし、それは私にはうまくいきません。つまり、「もっと見る」または「少なく表示する」というリンクが表示されません。

私の問題を解決するのを手伝ってください。

私の段落が単純/手動の場合、私のコードは完璧に機能します。しかし、太字の単語、パラなどを含むリッチテキストエディタを介して追加された段落を表示すると、問題が発生します（つまり、「もっと表示」または「表示を減らす」へのリンクが表示されません。）

例えば。

私のパラが（なしで<b>,<p>）**の場合、うまく機能します

<p class="descpara">  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem      </p>

<b>..</b> ,<p>..</p>( )を含めると機能しません

  <p class="descpara">  
<b>Lorem Ipsum </b>is simply <p> dummy text of the printing and typesetting industry.</p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem 
       </p>

私のjquery関数

jQuery(function()
        { 
        var minimized_elements = $('p.descpara');

         var desc_minimized_elements = $('p.descpara');
        minimized_elements.each(function()
        {    
             var t = $(this).text();        
             if(t.length < 300) return;

             $(this).html(
                 t.slice(0,300)+'<span>... </span><a href="#" class="more">More details</a>'+
                 '<span style="display:none;">'+ t.slice(300,t.length)+' <a href="#" class="less">Less details</a></span>'
             );

         });  
         $('a.more', minimized_elements).click(function(event){
             event.preventDefault();
             $(this).hide("fast").prev().hide("slow");
             $(this).next().show("fast");        
         });

         $('a.less', minimized_elements).click(function(event){
             event.preventDefault();
             $(this).parent().hide().prev().show().prev().show();    
         }); 
       });

そして私のview.phpページで

   <div class="products">
         <div id="bookcont">
           <?php echo"<div id='btitle'>$row->book_title</div></br>";  
               echo "<p>by $row->auth_firstname   $row->auth_lastname</p>"; ?> 
             <div class="detail"> 

             <!--  A long text paragraph, i am apply for this -->
              <p class="descpara">  
                   <?php echo $row->description?>
               </p> 
         </div> 
       </div>

前述のようにコードを適用した後の現在の出力： ここに画像の説明を入力

4

1 に答える 1

0

問題はあなたが<p>中にいるということです<p>

解決策：コンテナーの <div>代わりに使用します。ここを参照してください：http： //jsfiddle.net/tbE8V/1/<p>

また、リッチテキストを保持したい場合は、コンテナを抽出する必要はありhtmlません。text

var minimized_elements = $('div.descpara');  // <--- note div not p  (change in html as well)

     var desc_minimized_elements = $('div.descpara');
    minimized_elements.each(function()
    {    
         var t = $(this).html();    // <--- note taken html not text

また、あなたのソリューションはリッチテキスト（!!!）に問題があるかもしれません。300文字の制限がとの間、または要素名の途中（たとえば、 ""の途中）で終わる可能性 <b>が</b>ある<small>場合

編集：

リッチテキストの問題を処理するには、JavaScriptで文字列の文字数ではなく、コンテナ要素の高さを確認することをお勧めします。目的の高さを超える場合は、max-heightとoverflow：hiddenを持つ「hide-overflow」cssクラスを適用し、「more」リンクも追加します。「more」をクリックすると、コンテナから「hide-content」クラスが削除され、リンクが「less」に変更されます。

于 2013-02-10T08:15:54.717 に答える