Question

此示例显示/隐藏文本http://codepen.io/svinkle/pen/AqwDu是我打算在我的网站中调整的，但是如何修复代码以便不重复段落的第一行？在示例中，文本以＆＃34; 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;
}   

});

Answer 1

el.innerHTML += el.innerHTML + '...';

错误在上面。您要两次添加el.innerHTML。首先，您使用...添加它，然后使用简写+=运算符将其添加到自身。

应该只是

el.innerHTML += '...';

它出现在多个地方，您可能需要编辑所有这些内容。

显示/隐藏文本JavaScript错误

1 个答案: