我對 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