webentwicklung-frage-antwort-db.com.de

Hinzufügen einer jQuery-Funktion zu bestimmten Elementen

Ich weiß, dass Sie neue jQuery-Funktionen durch $.fn.someFunction = function() hinzufügen können

Ich möchte jedoch nur bestimmten Elementen Funktionen hinzufügen. Ich habe diese Syntax ausprobiert und es funktioniert nicht $('.someElements').fn.someFunction = function()

Ich möchte dies tun, damit ich die Funktion wie folgt irgendwo im Code aufrufen kann $('someElements').someFunction();

47
user2385136

Verwenden Sie .bind() und .trigger()

$('button').bind('someFunction',function() {
    alert('go away!')
});


$('button').click(function(){
    $(this).trigger('someFunction');
});

Ab jQuery 1.7 ist die . On () -Methode die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument.

48
Reigel

du kannst das oben genannte machen:

$.fn.testFn = function(){
    this.each(function(){
        var className = $(this).attr('class');
        $(this).html(className);
    });    
};

$('li').testFn(); //or any element you want

Test: http://jsfiddle.net/DarkThrone/nUzJN/

19
DarkThrone

Yo, der dasselbe tun musste, hatte es sich ausgedacht. Es ist schön, weil du das Element zerstörst und die Funktion kaputt geht! Meiner Ansicht nach...

var snippet=jQuery(".myElement");
snippet.data('destructor', function(){
    //do something
});
snippet.data('destructor')();
10
Drizzel

@ Reigels Antwort ist super! Sie können jedoch auch das $.fn Syntax und lassen Sie Ihre Funktion nur bestimmte Elemente behandeln:

$.fn.someFunction = function(){
    this.each(function(){
        // only handle "someElement"
        if (false == $(this).hasClass("someElement")) {
            return; // do nothing
        }

        $(this).append(" some element has been modified");

        return $(this); // support chaining
    });    
};

// now you can call your function like this
$('.someElement').someFunction();            

Siehe working jsfiddle: http://jsfiddle.net/AKnKj/3/

8
Friederike

Wenn Sie diese Funktion nur für bestimmte Selektoren benötigen, funktioniert Folgendes für Sie. Ich hatte gerade ein Szenario, in dem ich das brauchte und es funktioniert gut.

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
    };
})

dann später können Sie tun

$('.my-selector').getUrl()

ohne es als Plugin definieren oder Daten oder Bind/On/Trigger-Ereignisse verwenden zu müssen.

Natürlich können Sie die Funktion ändern, um das enthaltene Objekt zurückzugeben, wenn Sie es in der Verkettung verwenden möchten, indem Sie this zurückgeben.

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
        return this;
    };
})
8
dan richardson

Eigentlich hatte ich diesen Anwendungsfall auch, aber mit einem zwischengespeicherten Objekt. Ich hatte also bereits ein jQuery-Objekt, ein umschaltbares Menü, und ich wollte diesem Objekt zwei Funktionen zuweisen, "Öffnen" und "Schließen". Die Funktionen, die benötigt wurden, um den Bereich des Elements selbst beizubehalten, und das war es, also wollte ich, dass this das Menüobjekt ist. Wie bei jedem anderen Javascript-Objekt können Sie auch hier Funktionen und Variablen hinzufügen. Manchmal vergesse ich das.

var $menu = $('#menu');
$menu.open = function(){
   this.css('left', 0);
   this.is_open = true; // you can also set arbitrary values on the object
};
$menu.close = function(){
   this.css('left', '-100%');
   this.is_open = false;
};

$menu.close();
7
charltoons

Die naheliegendste Lösung besteht darin, eine Funktion als Eigenschaft des Objekts zuzuweisen:

obj.prop("myFunc", function() {
  return (function(arg) {
    alert("It works! " + arg);
  });
});

Dann nennen Sie es auf dem Objekt so:

obj.prop("myFunc")("Cool!");

Hinweis: Ihre Funktion ist der Rückgabewert der äußeren, siehe: http://api.jquery.com/prop/#prop-propertyName-function

2
Snegh

Ich bin mir bei meiner Antwort auch nicht sicher, ob dies für Sie hilfreich sein wird, aber wie wäre es mit .live?

$(selector).live(click,function(){
    //some codes here
});
1
Carls Jr.