Question

我是新来的，我不太了解JavaScript。我在这里看到类似这样的帖子： How do I add a read more link at the end of a paragraph? 但是我还需要一些其他的东西。我使用这些BB代码在我的游戏网站中添加内容： [url = url到游戏主页]游戏名称[img]图片链接[/ img] [/ url] [小]关于游戏的长篇描述[/ small]

我的要求是： 1.如果描述超过一定长度，则显示更多链接。 2.我希望描述附加...（3个点）和读取更多链接。 3.我在上面的bbcode中输入的更多链接需要相同的网址（游戏主页的网址）。

任何人都很难理解我的要求/问题。我的英语也不太好。您可以看到此页面以了解有关我的网站的更多信息。 http://only4gamers.wapka.me/site_25.xhtml 我已经有一个js代码，我得到了所有要求，但没有第三个要求。谁能告诉我怎么做到这一点？

Answer 1

如果你是以jquery的方式做的话。

$('.comments p').text(function(_, txt) {
  if(txt.length > 36){
    txt = txt.substr(0, 36) + "...";
    $(this).parent().append("<a href='#'>Read More</a>");
  }
  $(this).html(txt)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

Answer 2

description="This text is really to long.";
var words=description.split(" ");
if(words.length>4){
 description=words.splice(0,4).join(" ")+"...<span>Show</span><div class='hide'>"+words.join(" ")+"</div>";
}
console.log(description);

如何获得描述取决于您， Show 功能尚未实现。只是为了开始......

Answer 3

如果段落内的字符数超过一定的长度。

HTML 代码：

<p class="readMore">Class dolor ut sociosqu ad litora venenatis per conubia mollis, per consectetur vestibulum. Maecenas fermentum magna et leo eleifend bibendum. Nullam vitae aliquet nisi. In eu nibh sollicitudin, efficitur ligula lobortis, pharetra tellus. In ac blandit mauris. Aenean rhoncus consequat magna id commodo. Morbi quis eros rutrum libero scelerisque ullamcorper quis varius arcu. Nam vestibulum venenatis mollis. Proin consectetur metus et tortor interdum, eu eleifend mauris condimentum. Nunc varius tortor dolor, id pellentesque libero eleifend ut. </p>

JQuery 代码：

$(document).ready(function() {
    var max = 200;
    $(".readMore").each(function() {
        var str = $(this).text();
        if ($.trim(str).length > max) {
            var subStr = str.substring(0, max);
            var hiddenStr = str.substring(max, $.trim(str).length);
            $(this).empty().html(subStr);
            $(this).append(' <a href="javascript:void(0);" class="link">Read more…</a>');
            $(this).append('<span class="addText">' + hiddenStr + '</span>');
        }
    });
    $(".link").click(function() {
        $(this).siblings(".addText").contents().unwrap();
        $(this).remove();
    });
});

您可以在此处查看示例：substring()

如果文字超过一定长度，请显示阅读更多链接

3 个答案: