내 jQuery ID 선택기가 첫 번째 요소에만 영향을 미치는 이유는 무엇입니까?

jQuery ID 선택기가 첫 번째 요소만 대상으로 지정

개요

이 문서에서는 jQuery ID 선택기(#xyz)가 대상을 지정하지 못하는 문제를 해결합니다. 동일한 ID 값을 가진 여러 요소. 대신, 일치하는 첫 번째 요소에서만 작동하고 후속 요소는 응답하지 않습니다. 이 동작은 HTML ID 속성의 잘못된 사용과 jQuery ID 선택기의 고유한 제한으로 인해 발생합니다.

HTML 유효성 검사

HTML 사양에 따르면 문서 내의 각 요소에는 고유한 속성이 있어야 합니다. ID 속성 값. 여러 요소에 동일한 ID를 사용하면 HTML이 유효하지 않게 렌더링됩니다. 따라서 동일한 ID("xyz")를 가진 세 개의 버튼을 포함하는 다음 HTML 코드는 올바르지 않습니다.

<button>

jQuery 선택기 동작

jQuery ID 선택기(#id)는 고유 ID를 기반으로 단일 요소를 대상으로 하도록 설계되었습니다. 여러 요소가 동일한 ID를 공유하는 경우 선택기는 HTML 사양에 따라 첫 번째로 일치하는 요소만 선택합니다. 결과적으로 클릭 시 각 버튼의 값을 검색하려고 시도하는 다음 jQuery 스크립트는 첫 번째 버튼에 대해서만 작동합니다.

$("#xyz").click(function() {
  var xyz = $(this).val();
  alert(xyz);
});

해결책

이 문제를 해결하고 각 버튼이 버튼의 기능을 사용하려면 id 속성을 클래스 속성으로 바꾸도록 HTML 코드를 수정해야 합니다. 이를 통해 여러 요소가 HTML 표준을 위반하지 않고 동일한 클래스를 공유할 수 있습니다.

<button class="xyz" value="1">XYZ1</button>
<button class="xyz" value="2">XYZ2</button>
<button class="xyz" value="3">XYZ3</button>

"xyz" 클래스가 있는 모든 요소를 ​​대상으로 지정하려면 해당 jQuery 스크립트를 다음과 같이 업데이트해야 합니다.

$(".xyz").click(function() {
  alert(this.value);
});

결론

이러한 수정 사항을 사용하면 "xyz" 클래스가 있는 모든 버튼이 클릭 이벤트에 응답하도록 보장할 수 있습니다. 첫 번째 버튼만 작동했던 이전 문제. 이 접근 방식은 HTML 유효성 검사 표준을 준수하고 jQuery 클래스 선택기의 유연성을 활용하여 원하는 동작을 달성합니다.

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