使用 JavaScript 修复'显示更多/显示更少”按钮

开发者您好！ ??‍??‍?
我是一名计算机科学学生，正在学习 javascript，因为我想成为一名前端开发人员，今天我想分享一个我最近在使用 JavaScript 制作简单的“显示更多/显示更少”按钮时学到的概念。
你能说出第一个代码和第二个代码之间的区别吗
女巫一号是真的！！

我试图创建一个切换文本可见性的按钮，如下所示：

简单的 html 2 段落，其中之一具有文本隐藏文本类
这是我们要切换的按钮和一个可以完成这项工作的按钮

<p>lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<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中文网其他相关文章！