我对 javaScript 中的 if 语句有疑问

Question

我想检查 show 的 state 是否根据它更改按钮的 innerText 但是当我运行它时 else 语句不起作用

let showBtn = document.querySelector('.show-more');

showBtn.onclick = function () {
    let show = false;
    if (show === false) {
        showBtn.innerText = 'Show Less';
        show = true;
    } else {
        showBtn.innerText = 'Show more';
    }
}

Answer 1

showBtn在您的代码中的每次点击都是错误的。 它不应在onclick处理程序中分配。 尝试这个：

 let showBtn = document.querySelector('.show-more'); let show = false; showBtn.onclick = function() { if (show === false) { showBtn.innerText = 'Show Less'; } else { showBtn.innerText = 'Show more'; } show =;show; }

 <button class="show-more" />Show</button>

Answer 2

重置显示的值，每次点击都这样。

 let showBtn = document.querySelector('.show-more'); show = false; showBtn.onclick = function () { if (show === false) { showBtn.textContent= 'Show Less'; show = true; } else { show = false showBtn.textContent= 'Show more'; } }

Answer 3

if 语句不起作用，因为您已经在 function 中将 show 设置为 false。 如果您希望 if 语句切换，您需要以某种方式检查/维护按钮文本的 state。 以下是解决此问题的一种方法

Pt2：您应该设置 textContent，而不是 innerText（这是我最近遇到的一个问题）

let showBtn = document.querySelector('.show-more');


showBtn.onclick = function () {
   
if (!this.show) {
    showBtn.textContent = 'Show Less';
    this.show = true;
} else {
    showBtn.textContent = 'Show more';
    this.show = false;
}
}

Answer 4

在这种情况下，不要分配您的 state 变量let show在调用 function 内部。 当你这样做时，它会在你每次调用它时初始化变量。 这会导致性能问题（请参阅变量初始化和垃圾收集），并且取决于您想要执行的操作，它会中断。

这里有人已经给出了答案，但在他们的答案中，变量声明在全局 scope 中。 大多数人都同意声明全局变量不是一个好主意，尤其是使用像show这样的通用名称。 稍后，随着代码库的增长，您可能会遇到冲突，并且您的代码将开始以您无法预测的方式运行。 这可能是最普遍认可的编码约定。 这是一个坏习惯。 立即了解如何以正确的方式进行操作。

---

这两个 StackOverflow 答案包含的示例是生成工作模块化代码以控制对象的 state 的良好起点：

包装 function: https://stackoverflow.com/a/50137216/1977609

这是实现按钮的另一种方法： https://stackoverflow.com/a/10452789/1977609