<div class="text-container">
<p>
Though we welcome the idea of a smaller connector, we're miffed that Apple Couldn't just adopt the semi-industry standard of Micro-USB. That would make things easier for smartphone users across the globe. Yet, even so, the smaller connector may be a smart move for the future. The 30-pin connector has been around since 2003, long before the iPhone even existed: frankly, it's a dust magnet. A smaller connector helps shave extra space to achieve a smaller phone with perhaps a bigger battery. The new connector cable will mainly be used for syncing and charging by most people who own an Apple TV or Bluetooth/AirPlay accessories.
</p>
</div>
我想创建这样的东西:
<div class="text-container">
<p>
Though we welcome the idea of a smaller connector...<a href="some-javascript-to-show-more">[show more]</a>
</p>
</div>
我想我应该获取div的所有内容,然后找到第一个例如50个字符,并在其中放置一个链接,所有其他文本放在div中将被隐藏,单击链接后,将显示其他内容.
它应该像切换一样,如果展开则将文本从[显示更多]更改为[显示较少],反之亦然.
有什么建议如何使用普通的javascript和jquery本身而不使用其他jQuery插件来实现此目标?
解决方法:
这是另一种解决方案.
它不仅可以将中间的单词切掉,还可以检查结尾,标点和长单词.
$(".text-container p").each(function() {
var val = $.trim(this.innerHTML),
parsed = val.split(/\s+/),
cut = parsed;
// for each word
for (var i = 0, k = 0; i < parsed.length; i++) {
k += parsed[i].length + 1;
if (k - 1 > 50) {
cut = parsed.slice(0, i);
break;
}
}
// if one long word
if (cut.length == 0) {
cut.push(parsed[0].substring(0, 50));
}
val = cut.join(" ");
// if the text is long enough to cut
if (cut.length != parsed.length) {
this.innerHTML = val.replace(/[.,;?!]$/, "")
+ "<span>...</span> ";
$("<span />")
.css("display", "none")
.html(parsed.slice(cut.length).join(" ") + " ")
.appendTo(this);
$("<a />", {
href : "#",
text : "[show more]"
}).on("click", function(e) {
var sh = this.innerHTML == "[show more]";
$(this).prev("span").toggle(sh).prev("span").toggle(!sh);
this.innerHTML = sh ? "[show less]" : "[show more]";
e.preventDefault();
}).appendTo(this);
} else {
this.innerHTML = val;
}
});