显示/隐藏文本预览显示两次

Question

我正在尝试使文本在移动设备上崩溃，我的问题是它在显示“更多/更少”按钮的文本中显示了两倍。 我该怎么做，文本不会显示两次？

以下是带有data-js属性的文本，我正在设置标签，应在其中显示“显示更多”按钮。 问题在于，文本是如此单一 ，而文本却是第二个，而第二个之后则显示了显示更多/更少按钮。

<p data-js="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

这是JS

 // 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 = false;

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

    });

我上传到jsfiddle以获得更好的印象

Answer 1

双重文本归因于以下代码！

// Show teaser text
el.innerHTML = teaserText;
el.innerHTML += el.innerHTML + '...';

+ =通过连接字符串来重新分配结果本身，因此

a += a + "..."等于a = a + a + "..."

我想你打算

// Show teaser text
el.innerHTML = teaserText;
el.innerHTML += '...';

另外，由于您在一开始就隐藏了文本，因此您可能希望最初将showTeaser设置为True！

干得好

Answer 2

您可以简单地在其中添加您的代码

 if(window.outerWidth < 991) {
// Select all text areas
// 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 += '...';

    // 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 += '...';

        // Re-append the button
        el.appendChild(this);
      }
      return false;
    };
  } else { 
    // Show full text
    el.innerHTML = fullText;
  }   

});
}

这不是最干净的解决方案，因为当有人调整浏览器的大小时，它不会隐藏或显示它。 用户必须重新加载他的页面。