如果使用 jQuery 的文本超过一定长度，则显示阅读更多链接

Question

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

我用过这个鳕鱼，但它不起作用，它给出了 Uncaught TypeError: $ is not a function

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