복붙노트

[JQUERY] jQuery를 SVG, 왜 안 나는 addClass 수 있습니까?

JQUERY

jQuery를 SVG, 왜 안 나는 addClass 수 있습니까?

해결법

  1. 1.편집 2016 : 다음 두 가지 답변을 읽어 보시기 바랍니다.

    편집 2016 : 다음 두 가지 답변을 읽어 보시기 바랍니다.

    JQuery와 (3 미만)는 SVG에 클래스를 추가 할 수 없습니다.

    .attr ()는 jQuery를에 의존 할 그렇다면, SVG와 함께 작동합니다 :

    // Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

    그리고 당신은 jQuery를에 의존하지 않으려는 경우 :

    var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");

  2. 2.element.classList는 DOM API의가 HTML과 SVG 요소가 작동하는지. jQuery를 SVG 플러그인 또는 jQuery를위한 필요가 없습니다.

    element.classList는 DOM API의가 HTML과 SVG 요소가 작동하는지. jQuery를 SVG 플러그인 또는 jQuery를위한 필요가 없습니다.

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

  3. 3.3.0 버전 인 jQuery를에 나와있는 변화 중 하나 :

    3.0 버전 인 jQuery를에 나와있는 변화 중 하나 :

    이 문제에 대한 한 가지 해결책은 그것은 위대한 작품을 jQuery를 3으로 업그레이드하는 것입니다 :

    VAR 플립 사실 =; 하여 setInterval (함수 () { //이 toggleClass를 사용하지만, addClass을 보여주는 없습니다. 경우 (플립) { $ ( 'SVG 원') addClass ( '녹색.'); } 다른 { $ ( 'SVG 원') removeClass ( '녹색.'); } ! = 플립 플립; } 1000); SVG 원 { 입력 : 빨간색; 스트로크 : 검정; 스트로크 폭 : 5; } SVG의 circle.green { 입력 : 녹색; } <스크립트 SRC = "https://code.jquery.com/jquery-3.0.0.min.js"> <원 CX = "50"CY = "50"R = "25"/>

  4. 4.동적 클래스를하거나 클래스가 이미 적용 할 수 있는지 모르는 경우 내가 믿는이 방법이 가장 좋은 방법입니다 :

    동적 클래스를하거나 클래스가 이미 적용 할 수 있는지 모르는 경우 내가 믿는이 방법이 가장 좋은 방법입니다 :

    // addClass
$('path').attr('class', function(index, classNames) {
    return classNames + ' class-name';
});

// removeClass
$('path').attr('class', function(index, classNames) {
    return classNames.replace('class-name', '');
});

  5. 5.위의 답변을 바탕으로 나는 다음과 같은 API를 생성

    위의 답변을 바탕으로 나는 다음과 같은 API를 생성

    /*
 * .addClassSVG(className)
 * Adds the specified class(es) to each of the set of matched SVG elements.
 */
$.fn.addClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        return ((existingClassNames !== undefined) ? (existingClassNames + ' ') : '') + className;
    });
    return this;
};

/*
 * .removeClassSVG(className)
 * Removes the specified class to each of the set of matched SVG elements.
 */
$.fn.removeClassSVG = function(className){
    $(this).attr('class', function(index, existingClassNames) {
        var re = new RegExp('\\b' + className + '\\b', 'g');
        return existingClassNames.replace(re, '');
    });
    return this;
};

  6. 6.http://keith-wood.name/js/jquery.svgdom.js :로드 jquery.svg.js 후에는이 파일을로드해야합니다.

    http://keith-wood.name/js/jquery.svgdom.js :로드 jquery.svg.js 후에는이 파일을로드해야합니다.

    출처 : http://keith-wood.name/svg.html#dom

    근무 예 : http://jsfiddle.net/74RbC/99/

  7. 7.그냥 모든 SVG 노드에 누락 된 프로토 타입의 생성자를 추가 :

    그냥 모든 SVG 노드에 누락 된 프로토 타입의 생성자를 추가 :

    SVGElement.prototype.hasClass = function (className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(this.getAttribute('class'));
};

SVGElement.prototype.addClass = function (className) { 
  if (!this.hasClass(className)) {
    this.setAttribute('class', this.getAttribute('class') + ' ' + className);
  }
};

SVGElement.prototype.removeClass = function (className) {
  var removedClass = this.getAttribute('class').replace(new RegExp('(\\s|^)' + className + '(\\s|$)', 'g'), '$2');
  if (this.hasClass(className)) {
    this.setAttribute('class', removedClass);
  }
};

    그런 다음 jQuery를 필요로하지 않고이 방법을 사용할 수 있습니다 :

    this.addClass('clicked');

this.removeClass('clicked');

    모든 신용 토드 모토로 이동합니다.

  8. 8.jQuery를이 SVG 요소의 클래스를 지원하지 않습니다. 당신은 요소 직접 $ (엘) 갔지 (0)를 얻을 classList를 사용하고 / 제거를 추가 할 수 있습니다. 최상위 SVG 요소가 실제로 일반 DOM 객체이며, jQuery를 다른 모든 요소처럼 사용할 수 있다는 것을 너무이있는 트릭이있다. 내 프로젝트에서 나는 내가 필요로하지만, 모질라 개발자 네트워크에서 제공되는 문서가 대안으로 사용할 수있는 심을 무슨 돌봐이를 만들었습니다.

    jQuery를이 SVG 요소의 클래스를 지원하지 않습니다. 당신은 요소 직접 $ (엘) 갔지 (0)를 얻을 classList를 사용하고 / 제거를 추가 할 수 있습니다. 최상위 SVG 요소가 실제로 일반 DOM 객체이며, jQuery를 다른 모든 요소처럼 사용할 수 있다는 것을 너무이있는 트릭이있다. 내 프로젝트에서 나는 내가 필요로하지만, 모질라 개발자 네트워크에서 제공되는 문서가 대안으로 사용할 수있는 심을 무슨 돌봐이를 만들었습니다.

    예

    function addRemoveClass(jqEl, className, addOrRemove) 
{
  var classAttr = jqEl.attr('class');
  if (!addOrRemove) {
    classAttr = classAttr.replace(new RegExp('\\s?' + className), '');
    jqEl.attr('class', classAttr);
  } else {
    classAttr = classAttr + (classAttr.length === 0 ? '' : ' ') + className;
    jqEl.attr('class', classAttr);
  }
}

    대안은 모두 강하다는 대신 선택 엔진으로 D3.js를 사용하는 것입니다. 내 프로젝트는 내 응용 범위도 그래서 그것으로 내장되어 차트가 있습니다. D3는 제대로 바닐라 DOM 요소와 SVG 요소의 클래스 속성을 수정합니다. 가능성이 잔인한하는 것과이 사건에 대한 D3를 추가 비록.

    d3.select(el).classed('myclass', true);

  9. 9.JQuery와 2.2 및 1.12 출시 후는 다음 견적을 포함 :

    JQuery와 2.2 및 1.12 출시 후는 다음 견적을 포함 :

    그것은 테스트 :

    당신이 작은 사각형을 클릭하면 클래스 속성이 추가되어 있기 때문에, 그것을 제거 / 색상을 변경합니다.

    $ ( "# X"). () {(기능을 클릭 경우 {($ (이) .hasClass는 () "클릭") $ (이) .removeClass는 ( "클릭"); } 다른 { $ (이) .addClass는 ( "클릭"); } }); .clicked { 입력 : 빨간색 중요한;! } <스크립트 SRC = "https://code.jquery.com/jquery-2.2.0.js">

  10. 10.나는 및 SVG 클래스를 추가 할 Snap.svg를 사용합니다.

    나는 및 SVG 클래스를 추가 할 Snap.svg를 사용합니다.

    var jimmy = Snap(" .jimmy ")

jimmy.addClass("exampleClass");

    http://snapsvg.io/docs/#Element.addClass

  11. 11.여기 내 오히려 우아하지만 작업 코드는 그 (종속성 없음) 다음과 같은 문제를 다룬다 :

    여기 내 오히려 우아하지만 작업 코드는 그 (종속성 없음) 다음과 같은 문제를 다룬다 :

    그것은 어디 classList 수를 사용합니다.

    암호:

    var classNameContainsClass = function(fullClassName, className) {
    return !!fullClassName &&
           new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName);
};

var hasClass = function(el, className) {
    if (el.nodeType !== 1) {
        return false;
    }
    if (typeof el.classList == "object") {
        return (el.nodeType == 1) && el.classList.contains(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ? el.className : el.getAttribute("class");
        return classNameContainsClass(elClass, className);
    }
};

var addClass = function(el, className) {
    if (el.nodeType !== 1) {
        return;
    }
    if (typeof el.classList == "object") {
        el.classList.add(className);
    } else {
        var classNameSupported = (typeof el.className == "string");
        var elClass = classNameSupported ?
            el.className : el.getAttribute("class");
        if (elClass) {
            if (!classNameContainsClass(elClass, className)) {
                elClass += " " + className;
            }
        } else {
            elClass = className;
        }
        if (classNameSupported) {
            el.className = elClass;
        } else {
            el.setAttribute("class", elClass);
        }
    }
};

var removeClass = (function() {
    function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) {
        return (whiteSpaceBefore && whiteSpaceAfter) ? " " : "";
    }

    return function(el, className) {
        if (el.nodeType !== 1) {
            return;
        }
        if (typeof el.classList == "object") {
            el.classList.remove(className);
        } else {
            var classNameSupported = (typeof el.className == "string");
            var elClass = classNameSupported ?
                el.className : el.getAttribute("class");
            elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer);
            if (classNameSupported) {
                el.className = elClass;
            } else {
                el.setAttribute("class", elClass);
            }
        }
    }; //added semicolon here
})();

    사용 예제 :

    var el = document.getElementById("someId");
if (hasClass(el, "someClass")) {
    removeClass(el, "someClass");
}
addClass(el, "someOtherClass");

  12. 12.한 가지 해결 방법은 SVG 요소의 컨테이너에 addClass에 수 :

    한 가지 해결 방법은 SVG 요소의 컨테이너에 addClass에 수 :

    $ ( 'SVG-컨테이너입니다.') addClass ( 'SVG-빨간색.'); .svg - 빨간색 SVG 원 { 입력 : #의 ED3F32을; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    <원 CX = "20"CY = "20"R = "20"/>

  13. 13.내 프로젝트에서이 쓴, 그것은 아마 ... 작동)

    내 프로젝트에서이 쓴, 그것은 아마 ... 작동)

    $.fn.addSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        if(attr.indexOf(className) < 0) {
            $(this).attr('class', attr+' '+className+ ' ')
        }
    })
};    

$.fn.removeSvgClass = function(className) {

    var attr
    this.each(function() {
        attr = $(this).attr('class')
        attr = attr.replace(className , ' ')
        $(this).attr('class' , attr)
    })
};

    예

    $('path').addSvgClass('fillWithOrange')
$('path').removeSvgClass('fillWithOrange')

  14. 14.특히 사가르 갈라하여 위의 답변에서 영감을,이 API를 만들었습니다. 원하지 않는 또는 JQuery와 버전을 업그레이드 할 수 있다면 당신은 그것을 사용할 수 있습니다.

    특히 사가르 갈라하여 위의 답변에서 영감을,이 API를 만들었습니다. 원하지 않는 또는 JQuery와 버전을 업그레이드 할 수 있다면 당신은 그것을 사용할 수 있습니다.

  15. 15.JQ는 중간 어딘가에서 원숭이가있는 경우 또는 단지 구식 DOM 방법을 사용합니다.

    JQ는 중간 어딘가에서 원숭이가있는 경우 또는 단지 구식 DOM 방법을 사용합니다.

    var myElement = $('#my_element')[0];
var myElClass = myElement.getAttribute('class').split(/\s+/g);
//splits class into an array based on 1+ white space characters

myElClass.push('new_class');

myElement.setAttribute('class', myElClass.join(' '));

//$(myElement) to return to JQ wrapper-land

    DOM을 사람들을 알아보세요. 심지어 2016의 프레임 워크 palooza에 꽤 정기적으로 도움이됩니다. 혹시 누군가가 어셈블리에 DOM을 비교 듣는 경우에도, 나를 위해 그들을 킥.

    16. from https://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 구분하지 않는 경우가있다 : 선택기를 포함?  (0) 2020.09.26
[JQUERY] 나는 "catch되지 않은 구문 에러를 : 예기치 않은 토큰 (을)를"점점 계속  (0) 2020.09.26
[JQUERY] 사람이 JSONP는 평신도의 관점에서 무엇인지 설명 할 수 있습니까? [복제]  (0) 2020.09.26
[JQUERY] 사용자가 스크롤을 정지 할 때의 jQuery 스크롤 () 검출  (0) 2020.09.26
[JQUERY] 방법의 contentEditable 요소 (DIV)에서 설정 캐럿 (커서) 위치로?  (0) 2020.09.26
,

티스토리툴바