我试图实现我的javascript代码来实现更多的节目,并在我的页面描述超过字符限制时显示更少的功能。但是,在尝试运行网站时,它只显示描述中输入的所有文本,并且看起来好像脚本文件根本没有运行。我想知道是否可能是因为没有正确地将脚本文件放在html代码中?
以下是我的html片段:
<div class="newsletter_titles">Weekly Economic Financial Commentary- <strong class="newsletter_description_brief">Description of newsletter</strong>
<span class="more"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
...和我的脚本代码:
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
它应该显示的内容:
然而它显示了这个:
答案 0 :(得分:0)
看起来您可能错过了关闭document.ready函数的最终“}
”。
我将你的代码粘贴到这个小提琴中,除了那些东西的顺序错误(“显示更多”显示更少,反之亦然)它似乎在添加结束括号时起作用。