Jquery长段显示更多/显示较少链接不工作

我试图编码这个和“阅读更多”链接工作正常，但“显示较少”的链接不是。我无法检测到错误。在此代码中有一个与class="show-less"使用的锚标记，我试图用class="spanTxt"来隐藏span元素，但有些地方是错误的，并且它没有隐藏span元素。我没有得到它，如果我可以在display:inline中阅读更多链接，那么为什么它不工作，当我在display:none显示较少的链接。Jquery长段显示更多/显示较少链接不工作

感谢提前:)

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>jQuery Add Read More Link</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var maxLength = 300; 
     $(".show-read-more").each(function(){ 
      var myStr = $(this).text(); 
      if($.trim(myStr).length > maxLength){ 
       var newStr = myStr.substring(0, maxLength); 
       var removedStr = myStr.substring(maxLength, $.trim(myStr).length); 

       $(this).replaceWith('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>'); 
      } 
     }); 
     $(".read-more").click(function(){ 
      $(".spanTxt").css("display","inline"); 
      $(".show-read-more").append('<a href="#" class="show-less">show less...</a>'); 
      $(this).hide(); 
     }); 



    $(".show-less").click(function(){ 
      $(".spanTxt").css("display","none"); 


     }); 
    }); 
    </script> 
    <style type="text/css"> 

    </style> 
    </head> 
    <body> 
      <p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
      dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
      fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
      laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
      nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
      erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti 
      am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
      Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p 
      osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
      sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac 
      us et metus semper porttitor. Sed pellentesque ex at 
      pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante 
      commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni 
      ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi 
      s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac 
      lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
      hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
      Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I 
      nteger eu dignissim lectus, commodo eff 
      icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus 
      andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis 
      mod, elit elit tincidunt sem, ut consectetur arcu massa non diam. 
      Etiam scelerisque nisi magna. Nulla facilisi. 
      Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p> 


    </body> 
    </html>

来源

2016-12-02 Sunny Nishan

-1

你还没有添加结束了$(document).ready(function(){，在脚本的结尾。否则JavaScript会抛出错误。

来源

2016-12-02 18:02:00

他做，即使没有 - 这不是就能解决问题 – Dekel

你有几个问题存在（有些故障码无法正常工作，导致一些工作工作，但只在第p.show-read-more元素

这里是修复：

$(document).ready(function(){ 
 
    var maxLength = 300; 
 
    $(".show-read-more").each(function(){ 
 
    var myStr = $(this).text(); 
 
    if ($.trim(myStr).length > maxLength) { 
 
     var newStr = myStr.substring(0, maxLength); 
 
     var removedStr = myStr.substring(maxLength, $.trim(myStr).length); 
 
     var newP = $('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>') 
 
     newP.append($('<a href="#" class="show-less">show less...</a>').hide()) 
 
     $(this).replaceWith(newP); 
 
    } 
 
    }); 
 
    $(".read-more").click(function(){ 
 
    $(this).parent('.show-read-more').find('.spanTxt').css("display","inline"); 
 
    $(this).parent('.show-read-more').find('.show-less').show(); 
 
    $(this).hide(); 
 
    }); 
 
    $(document).on('click', '.show-less', function(){ 
 
    $(this).parent('.show-read-more').find('.read-more').show(); 
 
    $(this).parent('.show-read-more').find(".spanTxt").hide(); 
 
    $(this).hide(); 
 
    }); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
 
    dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
 
    fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
 
    laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
 
    nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
 
    erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti 
 
    am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
 
    Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p 
 
    osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
 
    sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac 
 
    us et metus semper porttitor. Sed pellentesque ex at 
 
    pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante 
 
    commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni 
 
    ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi 
 
    s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac 
 
    lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
 
    hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
 
    Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I 
 
    nteger eu dignissim lectus, commodo eff 
 
    icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus 
 
    andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis 
 
    mod, elit elit tincidunt sem, ut consectetur arcu massa non diam. 
 
    Etiam scelerisque nisi magna. Nulla facilisi. 
 
    Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p> 
 
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc 
 
    dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus 
 
    fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, 
 
    laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit 
 
    nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus 
 
    erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti 
 
    am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. 
 
    Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p 
 
    osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante 
 
    sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac 
 
    us et metus semper porttitor. Sed pellentesque ex at 
 
    pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante 
 
    commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni 
 
    ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi 
 
    s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac 
 
    lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus 
 
    hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. 
 
    Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I 
 
    nteger eu dignissim lectus, commodo eff 
 
    icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus 
 
    andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis 
 
    mod, elit elit tincidunt sem, ut consectetur arcu massa non diam. 
 
    Etiam scelerisque nisi magna. Nulla facilisi. 
 
    Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

来源

2016-12-02 18:16:38 Dekel

thanx的真棒解决方案，但它仍然是不令人满意的我没有得到知道我在哪儿出了问题。。 –

Jquery长段显示更多/显示较少链接不工作

回答

相关问题