>웹 프론트엔드 >JS 튜토리얼 >jQuery addClass()가 SVG 요소와 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

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

DDD
DDD원래의
2024-12-04 20:25:16219검색

Why Doesn't jQuery addClass() Work with SVG Elements, and How Can I Fix It?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.