2015-04-01 4 views
0

В этом примере показать/скрыть текст http://codepen.io/svinkle/pen/AqwDu - это то, что я намерен адаптировать на своем веб-сайте, но как исправить код, чтобы не повторять первые строки абзаца? В этом примере текст начинается с «Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisnim wanted molestie», который только что был повторен до 3 баллов (...) Как это исправить?Показать/скрыть текст Ошибка JavaScript

// 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; 
} 

}); 

ответ

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

Ошибка в выше line.You're добавления el.innerHTML дважды. Сначала вы добавляете его с ..., а затем добавляете его с собой из-за сокращенного += оператора.

Это должно быть просто

el.innerHTML += '...'; 

Он присутствует в нескольких местах, возможно, потребуется изменить все те.

Смежные вопросы