Question

我正在尝试在移动设备上使文本折叠，我遇到的问题是它在显示“更多/更少”按钮的情况下显示的文本是两倍。我该怎么办，文本不会显示两次？

下面是带有 data-js 属性的文本，我正在设置标签，应在其中显示“显示更多”按钮。问题是文本 Sod死了，所以gefüttert，dass der 变成了两倍，第二个之后显示了显示更多/更少按钮。

<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，因为您在一开始就隐藏了文字！

Here you go

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

});
}

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

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

2 个答案: