jQuery SVG, warum kann ich keine Klasse hinzufügen?

Es ist element.classList in die DOM-API, das funktioniert für HTML-und SVG-Elemente. Keine Notwendigkeit SVG-plugin für jQuery oder sogar jQuery.

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

InformationsquelleAutor der Antwort Tomas Mikula

Anhand der oben genannten Antworten habe ich die folgenden 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;
};

InformationsquelleAutor der Antwort Sagar Gala

Fügen Sie einfach die fehlenden Prototyp-Konstruktor alle SVG-Knoten:

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);
  }
};

Dann können Sie es auf diese Weise, ohne dass jQuery:

this.addClass('clicked');

this.removeClass('clicked');

Alle Kredit geht an Todd Moto.

InformationsquelleAutor der Antwort

Hier ist meine eher unelegant, aber funktioniert code, der sich mit den folgenden Themen (ohne Abhängigkeiten):

• classList nicht vorhandene <svg> Elemente im IE
• className repräsentieren nicht die class Attribut auf <svg> Elemente im IE
• Alten IE kaputt getAttribute() und setAttribute() Implementierungen

Es nutzt classList wo es möglich ist.

Code:

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
})();

Beispiel:

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

InformationsquelleAutor der Antwort Tim Down

Inspiriert von den Antworten, besonders von Sagar Gala, die ich angelegt habe dieses API. Sie können es verwenden, wenn Sie nicht wollen oder können nicht aktualisieren Sie Ihre jquery-version.

InformationsquelleAutor der Antwort Stonecrusher

Oder benutzen Sie einfach das old-school-DOM-Methoden, wenn JQ hat ein Affe irgendwo in der Mitte.

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

Lernen Sie die DOM-Menschen. Auch im Jahr 2016 die framework-palooza es hilft ziemlich regelmäßig. Auch, wenn Sie hören immer jemandem zu vergleichen, der-DOM-zu-Versammlung, kick Sie für mich.

InformationsquelleAutor der Antwort Erik Reppen