Question

我想缩短文字并添加“阅读更多”及其链接。

示例HTML代码：

<article id="post-58" class="post-58 post type-post status-publish format-standard hentry category-2">

    <header class="entry-header">
        <h2 class="entry-title">
            <a href="http://www.example.com/archives/58" rel="bookmark">
                Title Here
            </a>
        </h2>
    </header>
    <!-- .entry-header -->

    <div class="entry-content">
        <p>Content text here</p>
        <p>Content text here</p>
        <p>Content text here</p>
        <p>Content text here</p>
    </div><!-- .entry-content -->
</article>
<article id="post-57" class="post-57 post type-post status-publish format-standard hentry category-2">

    <header class="entry-header">
        <h2 class="entry-title">
            <a href="http://www.example.com/archives/57" rel="bookmark">
                Title Here
            </a>
        </h2>
    </header>
    <!-- .entry-header -->

    <div class="entry-content">
        <p>Content text here</p>
        <p>Content text here</p>
        <p>Content text here</p>
        <p>Content text here</p>
    </div><!-- .entry-content -->
</article>

我想将条目内容的长度更改为175个字符，并添加“Reader More”，其链接需要从“entry-title”类下的href属性中提取。

我尝试了以下脚本：

$("body.blog .entry-content").text(function(index, currentText) {
     return currentText.substr(0, 175)+'...';
     $(this).append('<a class="readmore">Read More</a>');
     var lnk = $(this).parent('article').children('.entry-header a').attr('href'); 
     $('a.readmore', this).attr('href', lnk);
});

内容将缩短，但不会添加“阅读更多”......

如何更正脚本？

感谢。

Answer 1

移动此行

return currentText.substr(0, 175)+'...';

到函数的底部。返回结束函数的执行，其余代码没有超过该函数。

您的功能将变为：

$("body.blog .entry-content").text(function(index, currentText) {
     $(this).append('<a class="readmore">Read More</a>');
     var lnk = $(this).parent('article').children('.entry-header a').attr('href'); 
     $('a.readmore', this).attr('href', lnk);
     return currentText.substr(0, 175)+'...';
});

使用jQuery添加链接属性

1 个答案: