Question

我为Truncateing段写了一个小的jquery函数。但它对我不起作用。即它没有显示链接给我“显示更多”或“显示更少”。

请帮我解决问题。

如果我的段落简单/手动，我的代码就完美了。但是，如果我显示通过富文本编辑器添加的段落，其中包含一些粗体词，para等然后是一个面部问题。（即它没有显示我的链接“显示更多”或“显示更少”。）

例如

如果我的段落是（没有任何,）**

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

如果我包含（.. ,..）

，则无效

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

应用代码后的当前输出如下： enter image description here

Answer 1

问题是您在

中有

解决方案：对容器使用<div>代替，请参阅此处：http://jsfiddle.net/tbE8V/1/

另请注意，如果要保留容器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个字符的限制可能会在和之间，或者甚至在元素名称的中间（例如，在“”中间）

编辑：

要处理富文本问题，我建议你的javascript应该检查容器元素的高度，而不是字符串中的字符数。如果它超过了所需的高度，那么应用一个“hide-overflow”css类，它将具有max-height和overflow：hidden，并且还添加“more”链接。单击“更多”将只从容器中删除“hide-content”类，并将链接更改为“less”。

无法使用jquery应用截断段落

1 个答案: