내 jQuery ID 선택기가 첫 번째 요소에서만 작동하는 이유는 무엇입니까?

jQuery ID 선택기는 첫 번째 요소만 선택합니다: 문제 이해

동일한 ID를 가진 세 개의 버튼이 있음에도 불구하고 jQuery의 #id 선택기는 첫 번째 버튼 클릭에만 응답합니다. 이 동작은 각 요소가 문서 내에서 고유한 ID를 가져야 한다는 기본 HTML 규칙에서 비롯됩니다.

잘못된 HTML 구조

제공된 HTML 코드는 동일한 ID(" xyz")를 여러 버튼으로 변환합니다. HTML 사양에 따르면 "이 속성은 요소에 이름을 할당합니다. 이 이름은 문서에서 고유해야 합니다."

해결책: 클래스로 변환

이 문제를 해결하려면 각 버튼에 대한 클래스 속성이 있는 ID 속성:

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

수정된 jQuery 코드

업데이트된 HTML 구조로, jQuery 코드는 다음과 같이 수정되어야 합니다:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery $(this).val() to get the value of the input.
});

jQuery 동작 이해

jQuery의 #id 선택기는 DOM에서 지정된 ID를 가진 첫 번째 요소만 선택합니다. 이는 브라우저의 기본 document.getElementById 함수가 이 동작을 수행하기 때문입니다.

결론

이러한 지침을 따르면 jQuery에서 동일한 기능 목적을 가진 여러 요소를 효과적으로 처리할 수 있습니다. 모든 버튼은 예상대로 클릭에 반응합니다.

위 내용은 내 jQuery ID 선택기가 첫 번째 요소에서만 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!