此示例显示/隐藏文本http://codepen.io/svinkle/pen/AqwDu是我打算在我的网站中调整的,但是如何修复代码以便不重复段落的第一行? 在示例中,文本以" Lorem ipsum dolor sit amet,consectetur adipiscing elit开头。 Vestibulum facilisnim想要molestie&#34 ;,刚刚在3点之前重复(...)如何解决它?
// Select all text areas
var textArea = document.querySelectorAll('[data-js=content]'),
maxText = 100;
// For each one...
[].forEach.call( textArea, function( el ) {
var textAreaLength = el.innerHTML.length,
teaserText = el.innerHTML.substr(0, 100),
fullText = el.innerHTML,
showTeaser = false;
// Check to see if this text length is more
// than the max
if (textAreaLength >= maxText) {
// Set flag
showTeaser = true;
// Set teaser text
el.innerHTML = teaserText;
el.innerHTML += el.innerHTML + '...';
// Create button
var button = document.createElement('button');
button.innerHTML = 'Show More';
button.classList.add('button');
el.appendChild(button);
// Button click event
button.onclick = function () {
if (showTeaser === true) {
// Update flag
showTeaser = false;
// Update button text
this.innerHTML = 'Show Less';
// Show full text
el.innerHTML = fullText;
// Re-append the button
el.appendChild(this);
} else {
// Update flag
showTeaser = true;
// Update button text
this.innerHTML = 'Show More';
// Show teaser text
el.innerHTML = teaserText;
el.innerHTML += el.innerHTML + '...';
// Re-append the button
el.appendChild(this);
}
return false;
};
} else {
// Show full text
el.innerHTML = fullText;
}
});
答案 0 :(得分:2)
el.innerHTML += el.innerHTML + '...';
错误在上面。您要两次添加el.innerHTML
。首先,您使用...
添加它,然后使用简写+=
运算符将其添加到自身。
应该只是
el.innerHTML += '...';
它出现在多个地方,您可能需要编辑所有这些内容。