使用 JavaScript 修復'顯示更多/顯示更少”按鈕

開發者您好！ ??‍??‍?
我是一名電腦科學學生，正在學習javascript，因為我想成為前端開發人員，今天我想分享一個我最近在使用JavaScript 製作簡單的「顯示更多/顯示更少」按鈕時學到的概念。
你能說出第一個代碼和第二個代碼之間的差異嗎
女巫一號是真的！ ！

我試著建立一個切換文字可見性的按鈕，如下所示：

簡單的 html 2 段落，其中一個具有文字隱藏文字類別
這是我們要切換的按鈕和一個可以完成這項工作的按鈕

<p>lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>



<p>css:<br>
</p>

<pre class="brush:php;toolbar:false">.hidden-text {
  display: none;
}

我聲明了我需要的所有變數

let showButton = document.querySelector(".show-more");
let text = document.querySelector(".text");
let value = false; // Initially, the text is hidden

我的第一個程式碼是：

showButton.addEventListener("click", (value) => {
    value = !value;
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text
});

但這不起作用，即使我使用 value=!value 進行切換，該值也始終為 false
經過一番搜索，我發現了為什麼會發生這種情況

每次按一下按鈕時，回呼函數內的本機值參數都會被重新聲明，這會隱藏外部值。

這表示外部值保持不變，始終保持 false。
本地值在回調內部切換，但它僅在該函數執行期間存在，不會影響外部值。

為了解決這個問題，我需要從回呼中刪除 value 參數，並直接使用在點擊按鈕時持續存在的外部值。

let value = false; // Persistent state variable

showButton.addEventListener("click", () => { 
    value = !value; // Toggle the outer value
    text.classList.toggle("hidden-text");
    showButton.textContent = value ? "show less..." : "show more..."; // Update button text based on value
});

以上是使用 JavaScript 修復'顯示更多/顯示更少”按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！