javascript - 在 Javascript 中有条件地调用函数？

Question

我有一个名为 Truncate 的函数，它会 chop 文本。我如何才能有条件地调用该函数只有当类 demo 的左 div 的 offsetheight 超过右 div 的 offsetheight 时。如果不满足条件，则直接返回原来的内容。

这是一个demo

var textHolder = document.querySelector('.demo');
var textHolder2 = document.querySelector('.demo2')
var textHolderHeight = textHolder.offsetHeight + 'px'
var textHolderHeight2 = textHolder2.offsetHeight + 'px'
console.log(textHolderHeight)
console.log(textHolderHeight2)
var fullText = textHolder.innerHTML;
var btn = document.querySelector('.btn');
var textStatus = 'full'; // use this to check the status of text and toggle;

function Truncate(textHolder, limit) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit) {
    let newText = txt.substr(0, limit) + ' ...';
    textHolder.innerHTML = newText;
    textStatus = 'truncated';
  }
}

Truncate(textHolder, textHolder.offsetWidth / 10);

function toggleText() {
  // here i want to show full text...
  // and also -> btn.innerHTML = 'Hide Text' | 'Show Text;
  if (textStatus === 'truncated') {
    textHolder.innerHTML = fullText;
    textStatus = 'full';
  } else {
    Truncate(textHolder, textHolder.offsetWidth / 10);
  }
}


btn.addEventListener('click', toggleText);

<section class="demo" id="demo">
  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long
  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!
</section>

<button class="readMore btn">Read More</button>
<br><br><br>

<section class="demo2" id="demo2">
  Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long
  line of text so that the words don't wrap when they're not supposed to. Multi-line of course!don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to.
  Multi-line of course!don't wrap when they're not supposed to. Multi-line of course! Let's truncate a long line of text so that the words don't wrap when they're not supposed to. Multi-line of course!
</section>

提前谢谢你们。

Answer 1

您可以在每次需要调用 Truncate 时使用 if 语句。

if(textHolderHeight > textHolderHeight2){
     Truncate(textHolder, textHolder.offsetWidth / 10);
}

或者将代码放在 Truncate 中，这样您就不必重复 if 语句。

function Truncate(textHolder, limit) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit && textHolderHeight > textHolderHeight2) {
    let newText = txt.substr(0, limit) + ' ...';
    textHolder.innerHTML = newText;
    textStatus = 'truncated';
  }
}