是否使用javascript隐藏/显示文本？

Question

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

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

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

​

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>

​

Answer 2

你可以用更少的代码来实现这一点：

​

var myButton = document.getElementById('toggle_text');
var textCont = document.getElementById('original_text');
var text = textCont.innerText;
var shortText = text.substring(0, 7) + '...';

myButton.addEventListener('click', function() {
  if (textCont.innerText === text) {
    textCont.innerText = shortText;
  } else {
    textCont.innerText = text;
  }
}, false);

<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">Toggle Between truncate and Original Text</button>
</div>

​

Answer 3

我会考虑在similar question上查看S.Serpooshan's answer。通常，只使用CSS就可以实现这一点，这将是维护页面状态的更好方法。

无需将文本作为变量存储在JS中，只需将其隐藏在DOM流中，但仍可轻松访问。