如果文本超過一定長度，則使用jQuery顯示更多鏈接

Question

我想在文章描述中的100個字之后添加“顯示更多”和“顯示更少”功能：在此頁面中http://devo.cutwatches.com/zh_CN/component/spsimpleportfolio/item/3-powerfull

我已經使用過此鱈魚，但無法正常工作，它給出了Uncaught TypeError：$不是函數

        <p class="show-read-more">
        <?php echo $this->item->description; ?>  </p>

和

  <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).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read- 
   more">read more...</a>');
        $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
    $(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});
});
</script>


<style type="text/css">
    .show-read-more .more-text{
    display: none;
}

`

我已經嘗試過使用CSS，但無法正常工作

我該如何解決？

Answer 1

您的html應該是這樣的

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

  // Body

  <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).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read- 
   more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
    $(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});
});
</script>

 </body>
</html>

如果文本超過一定長度，則使用jQuery顯示更多鏈接

問題描述

1 個解決方案

解決方案1
0 2018-06-02 19:37:09

如果文本超過一定長度，則使用jQuery顯示更多鏈接

問題描述

1 個解決方案

解決方案1 0 2018-06-02 19:37:09

解決方案1
0 2018-06-02 19:37:09