JavaScript로 '더 보기/간략히 보기' 버튼 수정

안녕하세요 개발자 여러분! ?‍??‍?
저는 CS 학생이고 프론트엔드 개발자가 되고 싶어서 자바스크립트를 배우고 있는데, 오늘은 최근에 자바스크립트를 이용하여 간단한 "더 보기 / 간략히 보기" 버튼을 만들면서 배운 개념을 공유하고 싶었습니다.
첫 번째 코드와 두 번째 코드의 차이점이 무엇인지 알 수 있나요
그리고 마녀1은 사실이에요!!

다음과 같이 텍스트 표시 여부를 전환하는 버튼을 만들려고 했습니다.

텍스트 숨겨진 텍스트 클래스가 포함된 간단한 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로 유지됩니다.
로컬 값은 콜백 내부에서 전환되지만 해당 함수가 실행되는 동안에만 존재하며 외부 값에는 영향을 미치지 않습니다.

이 문제를 해결하려면 콜백에서 값 매개변수를 제거하고 버튼 클릭 시 지속되는 외부 값을 직접 사용해야 했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!