javascript - 使用JavaScript隐藏/显示文字？

我在尝试切换文本时遇到问题。我有一个被截断的文本，如何在被截断的文本和单击按钮时的原始文本之间来回切换？
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>

提前谢谢你们。

最佳答案

您可以将完整的内容文本和被截断的状态保存在如下变量中：

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>

关于javascript - 使用JavaScript隐藏/显示文字？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57259572/