-1

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

请帮我解决我的问题。

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

例如。

如果我的 para 是（没有任何<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>代替<p>容器，见这里：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 个字符的限制可能在 <b>and之间结束</b>，或者甚至在元素名称的中间（例如，在“ <small>”的中间）

编辑：

为了处理富文本问题，我建议您的 javascript 应该检查容器元素的高度，而不是字符串中的字符数。如果它超过所需的高度，则应用一个“隐藏溢出”css 类，该类将具有最大高度和溢出：隐藏，并添加“更多”链接。单击“更多”只会从容器中删除“隐藏内容”类并将链接更改为“更少”。

于 2013-02-10T08:15:54.717 回答