Zu erkennen, wie Klasse ändern, indem DOMAttrModified

Brauche ich, um zu erkennen, einige Klassen ändern, verwende ich für diese DOMAttrModified, aber etwas ist falsch, was?

var first_img = $('body').find('li:first').find('img');

first_img.on('DOMAttrModified',function(e){
    if (e.attrName === 'class') {
        if ($(this).hasClass('current-image')) {
            $(this).removeClass().addClass('previous-image');
        }
        console.log('log');
    }
});

Thx für die Ratschläge.

Die attrName Eigenschaft ist nicht Teil von jQuery event object - ...Sie verwenden müssen e.originalEvent.attrName
Nicht verwandt, Aber die Mutation events sind veraltet. Können Sie wahrscheinlich wollen, um einen Blick auf Mutation Beobachter
Ich würde auf jeden Fall sagen, dass Sie verwandt sind. Zu erwähnen Abwärtskompatibilität ist sehr wichtig, damit ein großer Punkt. Und ich sah Ihren Kommentar auf meine Antwort - sorry, wir müssen haben unsere eigenen "Geigen" und veröffentlicht Sie um die gleiche Zeit. Als ich sah, dass Ihr Kommentar hier wusste ich, es wäre eine gute Idee, zumindest ein Beispiel geben mit MutationObserver
In der Tat habe ich nicht Ihre Antwort aktualisiert, so dachte der posten, es als Kommentar, dann sah ich Sie schon aktualisiert hatte, Urs :). Keine Probleme habe ich +1 urs für ähnliche Gedanken. 🙂 Ehrlich gesagt, hatte ich diese erkundet, während die Beantwortung einer bootstrap-Bezug question vor. 🙂
Kein problem, ich hätte gerne Hinzugefügt, Ihre Geige, wenn ich nicht hatte es schon getan, und ich weiß es zu schätzen! Cool, danke für den link. Und ja, ich habe auf jeden Fall gehört diese features habe ich einfach nie erforscht/genutzt, daher ist es interessant einrichten

InformationsquelleAutor Lukas | 2013-06-18

  1. 12

    Das unmittelbare problem ist, dass ein attrName Eigenschaft ist nicht Teil von jQuery event object - ...Sie verwenden müssen e.originalEvent.attrName. Hier ist ein Beispiel dass es funktioniert:

    var first_img = $("body").find("div").first();

first_img.on("DOMAttrModified", function (e) {
    if (e.originalEvent.attrName === "class") {
        console.log("##DOMAttrModified, class changed");
        if ($(this).hasClass("current-image")) {
            console.log("##Element has 'current-image' class, changing");
            $(this).removeClass().addClass("previous-image");
        }
    }
});

setTimeout(function () {
    first_img.addClass("current-image");
}, 1000);

    DEMO: http://jsfiddle.net/R5rTy/1/

    Den setTimeout zu simulieren, das Ereignis zufällig geschieht.

    Offenbar, die DOMAttrModified Ereignis wird nicht unterstützt in allen Browsern - http://help.dottoro.com/ljfvvdnm.php#additionalEvents

    UPDATE:

    Verwendung der neueren MutationObserver folgende zeigt die Verwendung der beiden Ideen:

    var firstImg, observerConfig, firstImgObserver;

firstImg = $("body").find("div").first();
observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
};
firstImgObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
            console.log("MutationObserver class changed to", newVal);
        } else if (mutation.attributeName === "id") {
            console.log("MutationObserver id changed to", newVal);
        }
    });
});

firstImgObserver.observe(firstImg[0], observerConfig);
//later, you can stop observing
//observer.disconnect();

firstImg.on("DOMAttrModified", function (e) {
    var newVal = $(this).prop(e.originalEvent.attrName);
    console.log("DOMAttrModified", e.originalEvent.attrName, "changed to", newVal);
});

setTimeout(function () {
    firstImg.addClass("previous-image").addClass("fdsa");
}, 1000);

    DEMO: http://jsfiddle.net/ybGCF/

    Referenz:

    aber es ist nichts passiert 🙂 ich habe keine logs
    Lass mich raten...die Prüfung in Chrome oder IE? Ich wurde getestet in FireFox und es funktioniert gut für mich, aber beschlossen, zu testen, in Chrom und fand es hat nicht funktioniert. Wie es aussieht ist es nicht unterstützt in allen Browsern: help.dottoro.com/ljfvvdnm.php#additionalEvents
    Ich vergaß zu erwähnen - ich aktualisiert meine Antwort vor langer Zeit auch MutationObserver, die verschiedene browser unterstützen. Hoffentlich wird meine Antwort deckt nun genug Fälle
    In der Tat, dauerte es Vorteil deiner Lösung, und ich vergaß hinzuzufügen, einige Stimmen. Ich danke Ihnen sehr für Ihre Hilfe, alles läuft reibungslos.
    Kein problem, ich wollte nur sicherstellen, dass Sie nicht noch Probleme mit dem es. Froh, dass es geholfen/funktioniert!

    InformationsquelleAutor Ian

Schreibe einen Kommentar