JavaScript で「もっと表示/少なく表示」ボタンを修正する

開発者の皆さん、こんにちは！ ?‍??‍?
私は CS の学生で、フロントエンド開発者になりたいので JavaScript を学んでいます。今日は、JavaScript を使用してシンプルな「もっと表示 / 少なく表示」ボタンを作成しているときに最近学んだ概念を共有したいと思います。
最初のコードと 2 番目の
の違いが分かりますか? そして魔女 1 は真実です !!

私は、次のようなテキストの表示/非表示を切り替えるボタンを作成しようとしていました:

単純な HTML 2 パラグラフのうちの 1 つはテキスト隠しテキストのクラスです
それは私たちが切り替えるボタンであり、仕事を行うボタンです

<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 中国語 Web サイトの他の関連記事を参照してください。