jQuery addClass()가 SVG 요소와 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

jQuery SVG: addClass() 딜레마 해결

jQuery SVG는 SVG 요소와 상호 작용하는 편리한 방법을 제공하지만 사용자는 SVG에 클래스를 추가하거나 제거하는 데 어려움을 겪을 수 있습니다. 사물. 이 문제는 jQuery가 버전 3 이전의 SVG 요소에 대한 클래스 속성을 처리할 수 없기 때문에 발생합니다.

문제 이해

제공된 SVG 코드:

<rect>

그리고 jQuery 코드:

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

jQuery가 SVG에 "클릭된" 클래스를 추가할 수 없음을 보여줍니다. 직사각형. 객체를 클릭하면 경고를 실행할 수 있음에도 불구하고 클래스 추가 또는 제거가 실패합니다.

해결책

옵션 1: jQuery 3 이상으로 업그레이드

jQuery 3에서는 클래스 속성을 조작하는 기능을 포함하여 SVG 처리 기능이 크게 향상되었습니다. jQuery 3 이상으로 업그레이드하면 이 문제가 해결됩니다.

옵션 2: jQuery 또는 Vanilla JS에 대해 각각 .attr() 또는 setAttribute()를 사용

업그레이드하지 않고 jQuery 3에서는 jQuery의 .attr() 메서드나 바닐라 JavaScript의 setAttribute() 메서드를 사용하여 SVG 클래스를 수정할 수 있습니다.

jQuery

$("#item").attr("class", "oldclass newclass"); // Add a class
$("#item").attr("class", "oldclass"); // Remove a class

Vanilla JavaScript

var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass"); // Add a class
element.setAttribute("class", "oldclass"); // Remove a class

이러한 대체 접근 방식을 사용하면 다음을 성공적으로 수행할 수 있습니다. jQuery 3으로 업그레이드하지 않고도 jQuery 또는 바닐라 JavaScript의 SVG 요소에서 클래스를 추가하거나 제거할 수 있습니다.

위 내용은 jQuery addClass()가 SVG 요소와 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!