首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果文本超过一定长度,则使用jQuery显示阅读更多链接

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

Stack Overflow用户
提问于 2018-06-03 03:32:07
回答 1查看 841关注 0票数 1

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

我用过这个代码,但它不起作用,它给出了未捕获的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试过了,但不起作用

我怎么才能修好呢?

EN

回答 1

Stack Overflow用户

发布于 2018-06-03 03:37:10

你的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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50660449

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档