jQuery의 ID 선택기가 동일한 ID를 가진 여러 요소에서 작동하지 않는 이유는 무엇입니까?

jQuery ID 선택기가 여러 요소에 대해 작동하지 않음

여러 요소에 동일한 ID를 사용함에도 불구하고 jQuery의 ID 선택기는 다음이 포함된 첫 번째 요소만 인식합니다. 그 아이디. 이는 클릭 이벤트 시 여러 동일한 ID 요소의 값을 검색하려고 할 때 문제를 야기합니다. 문제는 다음과 같습니다.

<button>

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

그러나 이 jQuery 스크립트는 첫 번째 버튼("XYZ1")의 값만 캡처합니다. 다른 버튼을 클릭하면 응답이 발생하지 않습니다.

이 동작의 이유는 HTML ID 속성의 특성에 있습니다. HTML 사양에 따르면 ID 값은 문서 내에서 고유해야 합니다. 여러 요소에 동일한 ID를 할당하는 것은 이 규칙을 위반하는 것이며, 결과적으로 브라우저는 ID로 쿼리할 때 첫 번째로 일치하는 요소만 반환하게 됩니다.

해결책: 클래스가 있는 고유 식별자

To 이 문제를 해결하려면 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:

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

이 코드는 클릭 시 세 버튼 모두의 값을 성공적으로 검색합니다. 신뢰할 수 없는 ID 선택기에 의존하는 대신 클래스 속성은 유사한 여러 요소에 대한 고유 식별자를 제공하고 특정 정보를 검색할 수 있도록 합니다.

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