javascript - 使用 javascript 隐藏/显示文本？

Question

我在尝试切换文本时遇到问题。我有一个被 chop 的文本，如何在单击按钮时在 chop 文本和原始文本之间来回切换？

link到笔。

var myButton = document.getElementById('toggle_text')
var text = document.getElementById('original_text')
console.log(text)

var truncate = function(elem, limit, after) {

  // Make sure an element and number of items to truncate is provided
  if (!elem || !limit) return;

  // Get the inner content of the element
  var content = elem.textContent.trim();

  // Convert the content into an array of words
  // Remove any words above the limit
  content = content.split(' ').slice(0, limit);

  // Convert the array of words back into a string
  // If there's content to add after it, add it
  content = content.join(' ') + (after ? after : '');

  // Inject the content back into the DOM
  elem.textContent = content;

};

var elem = document.querySelector('.truncate');
truncate(elem, 7, '...');


function switchText() {

}

<div class="truncate" id="original_text">
  Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

<div>
  <button id="toggle_text" onClick='switchText()'>Toggle Between truncate and Original Text</button>
</div>

提前谢谢你们。

Answer 1

您可以像这样在变量中保存完整的内容文本和 chop 的状态:

var myButton = document.getElementById('toggle_text')
var text = document.getElementById('original_text')
console.log(text)

var truncate = function(elem, limit, after) {

  // Make sure an element and number of items to truncate is provided
  if (!elem || !limit) return;

  // Get the inner content of the element
  var content = elem.textContent.trim();

  // Convert the content into an array of words
  // Remove any words above the limit
  content = content.split(' ').slice(0, limit);

  // Convert the array of words back into a string
  // If there's content to add after it, add it
  content = content.join(' ') + (after ? after : '');

  // Inject the content back into the DOM
  elem.textContent = content;
  truncated = true;
};

var elem = document.querySelector('.truncate');
var fullText = elem.textContent;
var truncated = false;
truncate(elem, 7, '...');


function switchText() {
    var elem = document.querySelector('.truncate');
    if (truncated) {
      elem.textContent = fullText;
      truncated = false;
    } else {
      truncate(elem, 7, '...');
    }
     
}

<div class="truncate" id="original_text">
  Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

<div>
  <button id="toggle_text" onClick='switchText()'>Toggle Between truncate and Original Text</button>
</div>