Korrektur einer Schaltfläche „Mehr anzeigen/Weniger anzeigen' mit JavaScript

Hallo Entwickler! ?‍??‍?
Ich bin ein CS-Student und lerne Javascript, weil ich Frontend-Entwickler werden möchte. Heute möchte ich ein Konzept teilen, das ich kürzlich gelernt habe, als ich mit JavaScript eine einfache Schaltfläche „Mehr anzeigen/Weniger anzeigen“ erstellt habe.
Können Sie sagen, was der Unterschied zwischen dem ersten und dem zweiten Code ist
? und Hexe eins ist wahr!!

Ich habe versucht, eine Schaltfläche zu erstellen, die die Sichtbarkeit von Text umschaltet, etwa so:

Einfacher HTML-2-Absatz, einer davon mit der Textklasse „hidden-text“
Es ist diejenige, die wir umschalten werden, und eine Schaltfläche, die die Aufgabe erledigt

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

Ich habe alle Variablen deklariert, die ich brauche

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

mein erster Code war:

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

aber das hat nicht funktioniert, der Wert war immer falsch, selbst wenn ich mit value=!value umgeschaltet habe
Nach einigem Suchen habe ich herausgefunden, warum das passiert ist

Jedes Mal, wenn auf die Schaltfläche geklickt wurde, wurde der lokale Wertparameter innerhalb der Rückruffunktion neu deklariert, wodurch der äußere Wert überschattet wurde.

Das bedeutet, dass der äußere Wert unverändert bleibt und immer falsch bleibt.
und Der lokale Wert wird innerhalb des Rückrufs umgeschaltet, aber er existiert nur während der Ausführung dieser Funktion und hat keinen Einfluss auf den äußeren Wert.

Um dieses Problem zu lösen, musste ich den Wertparameter aus dem Rückruf entfernen und direkt den äußeren Wert verwenden, der über alle Schaltflächenklicks hinweg bestehen bleibt.

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

Das obige ist der detaillierte Inhalt vonKorrektur einer Schaltfläche „Mehr anzeigen/Weniger anzeigen' mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!