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

jQuery SVG 클래스 조작 문제

jQuery SVG 조작 영역에서 사용자는 때때로 SVG 요소에서 클래스를 추가하거나 제거하는 데 어려움을 겪습니다. 이 문제를 유발하는 일반적인 시나리오는 jQuery로 SVG 개체를 대상으로 하고 .addClass() 메서드를 활용하려고 시도하는 것입니다.

제공된 코드 조각은 문제를 강조합니다.

<rect class="jimmy">

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

jQuery와 SVG 통합은 이벤트 처리에 완벽하게 작동하지만 클래스 조작은 성공하지 못합니다.

기본 원인

근본 원인은 v3 이전 버전의 jQuery에서 SVG 클래스 조작에 대한 제한된 지원에 있습니다. 이 문제는 jQuery가 HTML 요소와 비교하여 SVG 요소를 다르게 처리한다는 사실에서 비롯됩니다.

솔루션

이 문제를 해결하기 위해 여러 솔루션이 제시됩니다.

• jQuery v3 수용: jQuery v3 이상에서는 이 제한 사항을 해결하여 다음을 사용하여 SVG 요소에서 클래스를 원활하게 추가하고 제거할 수 있습니다. .addClass() 및 .removeClass().
• 바닐라 JavaScript 채택: 최신 브라우저는 SVG 요소의 클래스 조작에 대한 기본 지원을 제공합니다. classList.add() 및 classList.remove() 메서드를 활용하면 jQuery에 대한 안정적인 대안이 제공됩니다.
• Harness jQuery의 .attr() 메서드: jQuery를 계속 사용하려면 다음을 고려하세요. .attr() 메소드를 활용하여 클래스 속성 수정

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

// Remove class using .attr()
$("#item").attr("class", "oldclass");

• .setAttribute()를 사용하여 바닐라 JavaScript를 수용: 또는 바닐라 JavaScript를 사용하여 클래스 속성을 조작할 수도 있습니다.

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

// Remove class using .setAttribute()
element.setAttribute("class", "oldclass");

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