1

我试图找出一种方法来缩短可能包含链接的正文。 

<div class="bio">
    Banjo my soundcloud is <a href="http://soundcloud.com/username">http://soundcloud.com/username</a>
    Echo Park kale chips blog, cred pitchfork keffiyeh mixtape tumblr photo booth artisan helvetica
    meggings fashion axe roof party. Aesthetic biodiesel direct trade butcher, iPhone occupy before
    they sold out trust fund mumblecore cornhole food truck DIY narwhal freegan. Salvia try-hard
    freegan, Brooklyn Marfa craft beer fanny pack dreamcatcher High Life irony sriracha. Mumblecore
    Terry Richardson ethnic, pop-up tattooed sartorial 3 wolf moon banjo biodiesel church-key semiotics
    polaroid Etsy Schlitz hashtag. Wes Anderson gluten-free lomo brunch, raw denim plaid Schlitz salvia. 
</div>

我最初尝试通过截断字符数来缩短文本正文，然后我将插入一个“更多”链接，将其余文本放在一个跨度中，然后隐藏跨度直到单击“更多”链接。但是，如果用户决定将链接放在错误的位置，插入“更多”链接会破坏用户放置的锚标记。

这是我为这个问题找到的不起作用的解决方案：http : //www.bookofzeus.com/articles/dynamically-shortened-text-using-jquery/

缩短可能包含锚标签的正文的好方法是什么？

4

2 回答 2

3

你是对的，那个 jquery 演示代码不起作用，但演示起作用了。我必须解决一些问题，但这是一个你可以达到顶峰的小提琴。我也使用了你的文字信息。

http://jsfiddle.net/Fyzxn/1/

$(document).ready(function() {
    var orgContent = $('.bio').html();
    var txtContent = $('.bio').text().substr(0, 50) + '... <a id="morelink">more</a>';
    $('.bio').html(txtContent);
    $("body").on("click", '#morelink', function(){
        $('.bio').html(orgContent);
        $('<a id="lesslink"> less</a>').appendTo('.bio');
    });
    $("body").on("click", '#lesslink', function(){
        $('.bio').html(txtContent);
    });
});
于 2013-05-29T22:28:48.763 回答
2

我能想到的最简单的方法是动态创建文本正文的纯文本版本，这将作为预览显示。这样，您将不会遇到任何切断任何标记的问题，因为您只会处理纯文本。

jQuery 的 text() 方法可用于从字符串中删除所有 HTML 标记。这样，您可以创建纯文本预览，并在用户单击“更多”链接时将实际内容与 HTML 标记一起显示

于 2013-05-29T22:23:59.600 回答