JavaScript 상호 작용 후 요소(트리거 요소 포함)를 숨기는 방법은 무엇입니까?

JavaScript를 사용하여 상호작용 후 요소를 숨기는 방법

HTML에서는 CSS의 표시 속성을 사용하여 요소를 숨기거나 표시할 수 있습니다. JavaScript로 이 속성을 조작함으로써 개발자는 요소의 가시성을 동적으로 전환할 수 있습니다.

제공된 코드 조각에서 "편집" 링크를 클릭하면 showStuff() 함수가 트리거됩니다. 이 함수는 처음에는 display: none;을 사용하여 숨겨졌던 textarea 요소를 숨김 해제합니다. 스타일.

그러나 질문에서는 "편집" 링크와 "Lorem ipsum" 텍스트를 모두 숨기는 방법도 묻습니다. 이를 달성하기 위해 showStuff() 함수를 다음과 같이 수정할 수 있습니다.

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

이 업데이트된 함수에서:

1. id 매개변수는 동일하게 유지되며,
2. 표시되어야 하는 "Lorem ipsum" 텍스트 요소의 CSS ID를 나타내기 위해 새 매개변수인 text가 추가되었습니다. 숨김.
3. 클릭한 후 숨겨야 하는 HTML 요소(이 경우 "편집" 링크)를 나타내기 위해 새 매개변수 btn이 추가되었습니다.

업데이트된 HTML 코드에서는 추가 매개변수와 함께 동일한 함수가 호출됩니다.

<td>

이제 "편집" 링크를 클릭하면 텍스트 영역뿐만 아니라 표시되지만 "Lorem ipsum" 텍스트와 "Edit" 링크 자체는 숨겨집니다. 이는 JavaScript를 사용하여 단일 함수 호출로 여러 요소의 가시성을 조작하는 방법을 보여줍니다.

위 내용은 JavaScript 상호 작용 후 요소(트리거 요소 포함)를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!