Membetulkan Butang 'Tunjukkan Lagi / Tunjukkan Kurang' dengan JavaScript

Helo pembangun! ?‍???‍?
Saya seorang pelajar CS dan saya belajar javascript kerana saya mahu menjadi pembangun bahagian hadapan, dan hari ini saya ingin berkongsi konsep yang baru saya pelajari semasa membuat butang "Tunjukkan Lagi / Tunjukkan Kurang" yang mudah menggunakan JavaScript.
bolehkah anda memberitahu apakah perbezaan antara kod pertama dan kedua
dan ahli sihir adalah benar !!

Saya cuba mencipta butang yang menogol keterlihatan teks, seperti ini:

html ringkas 2 paragrah salah satunya dengan kelas teks teks tersembunyi
ia yang akan kami togol dan butang yang akan melakukan tugas

<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;
}

saya mengisytiharkan semua pembolehubah yang saya perlukan

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

kod pertama saya ialah :

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

tetapi ini tidak berjaya nilai sentiasa palsu walaupun saya menukar menggunakan value=!value
selepas beberapa carian saya dapati mengapa ini berlaku

Setiap kali butang diklik, parameter nilai setempat dalam fungsi panggil balik sedang diisytiharkan semula, yang membayangi nilai luar.

ini bermakna Nilai luar kekal tidak berubah, sentiasa kekal palsu.
dan Nilai setempat ditogol dalam panggilan balik, tetapi ia hanya wujud semasa pelaksanaan fungsi itu dan tidak menjejaskan nilai luar.

Untuk menyelesaikannya, saya perlu mengalih keluar parameter nilai daripada panggil balik dan terus menggunakan nilai luar yang berterusan merentas klik butang.

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
});

Atas ialah kandungan terperinci Membetulkan Butang 'Tunjukkan Lagi / Tunjukkan Kurang' dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!