javascript - 使用 jQuery 抓取页面标题 URL 时在图像后添加阅读更多链接

Question

我有一个 jSfiddle file here .

我想在图片之后或在某些字符限制(可能在 100 左右)之后添加阅读更多链接。但是我在获取页面标题的链接时遇到了问题。我想让脚本动态化。

现在我的 jQuery 是这样写的。

jQuery

$('.BlockContent p').each(function() {
    var txt = $(this).text();
    var link = $('#NewsContent .p-name').attr("href");
    if (txt.length>5) {
        $(this).html('<span>'+txt.substring(0,5)+'&nbsp;&nbsp;</span><a href="link"> Read More</a>');
    }
}); 

我的 HTML

<div class="BlockContent" id="NewsContent">
    <img src="http://placehold.it/600x300">
    <h1 class="p-name"><a href="#">Page Title</a></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in odio mi. Fusce varius urna quis sem viverra id laoreet sem imperdiet. Morbi ultricies varius tortor, in congue ipsum facilisis ut. Suspendisse potenti. Nam ut eros quis orci eleifend rutrum vestibulum adipiscing nisl. Morbi mauris dui, iaculis consequat auctor in, auctor vel velit. Mauris lacinia adipiscing sapien, vel mollis massa pulvinar et. Curabitur eu urna venenatis nisi rhoncus eleifend. Nam dapibus lectus ac libero aliquet id malesuada tortor accumsan. Mauris lacus orci, euismod ac vehicula nec, scelerisque non tortor. Praesent quis odio a elit congue luctus. Aliquam ultricies, massa quis gravida tincidunt, justo mi scelerisque lectus, fringilla hendrerit tortor metus quis tellus. Suspendisse sit amet felis eu erat mollis rhoncus at non ligula. Fusce odio est, consectetur sed scelerisque quis, rhoncus ac lectus. Donec accumsan viverra eros, et vulputate augue laoreet et.</p>
</div>

谁能指出我做错了什么？

Answer 1

获取标题链接的代码是选择 h1 元素而不是其中的 anchor 。

更改:var link = $('#NewsContent .p-name').attr("href");

到:var link = $('#NewsContent .p-name a').attr("href");

然后您需要在字符串中正确连接该变量:

$(this).html('<span>' + txt.substring(0, 5) + '&nbsp;&nbsp;</span><a href="'+link+'"> Read More</a>');

jsFiddle example