Schreiben Sie ein jQuery-Plugin, das Werte zurückgibt

Question

Ich schreibe ein jQuery-Plugin, das in einigen Fällen einige Daten speichert.

Ich möchte es sehr flexibel schreiben, wo ich einen Eingabeparameter ändern kann, um einen Wert zu erhalten, der vom Plugin gespeichert wurde.

Erläuterung:

Wenn ich rufe $("#any").myPlugin(), mein Plugin initialisiert eine div und einige a innen zu schaffen. Klicken Sie auf ein a wird es .index() mit der .data() Methode speichern. Wenn ich rufe $("#any").myPlugin("getSelection") dann möchte ich den Wert mit .data() gespeichert bekommen.

Was ich versucht hatte:

(function ($) { 
    $.fn.myPlugin = function (action) { 
     if (action == null) action = "initialize"; 

     return this.each(function ($this) { 
      $this = $(this); 

      if (action == "initialize") { 
       $this.html('<div></div>'); 
       var div = $("div", $this); 

       div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>'); 

       div.children("a").each(function (i) { 
        $(this).click(function (event) { 
         // Here I store the index. 
         $this.data($(this).index()); 
         event.preventDefault(); 
         return false; 
        }); 
       }); 

       return $this; 
      } else if (action == "getSelection") { 
       // With this action, I tried to get the stored value. 
       return $this.data("selectedValue"); 
      } 
     }); 
    }; 
})(jQuery); 

einfachen Aufruf der Elemente zu erstellen:

$("#someElement").myPlugin(); 

Und hier habe ich versucht hatte, den Index zu bekommen, ohne Erfolg:

alert($("#someElement").myPlugin("getSelection")); 

Also, ist es möglich zu tun, was ich versuche?

Answer 1

Sie müssen den Auftrag, ein bisschen ändern sich, wie folgt aus:

(function ($) { 
    $.fn.myPlugin = function (action) { 
     action = action || "initialize"; 

     if (action == "getSelection") { 
      return this.data('index'); 
     } 

     return this.each(function ($this) { 
      $this = $(this); 

      if (action == "initialize") { 
       $this.html('<div></div>'); 
       var div = $("div", $this); 

       div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>'); 

       div.children("a").each(function (i) { 
        $(this).click(function (event) { 
         // Here I store the index. 
         $this.data('index', $(this).index()); 
         event.preventDefault(); 
         return false; 
        }); 
       }); 

       return $this; 
      } 
     }); 
    }; 
})(jQuery); 

Die Sie geklickt Index aus wie diese bekommen:

alert($("#someElement").myPlugin("getSelection")); 

You can give it a try here, das grundlegende Problem ist, Sie versuchen, aus einer .each() Schleife einen einzelnen Wert zurückgeben, die nicht funktioniert. Dies ergreift stattdessen die Daten von dem ersten Objekt, das dem Selektor entspricht (#someElement in dem Beispiel).Auch .data() speichert andere Dinge, so müssen Sie Ihren Wert einen Schlüssel geben, wie ich 'index' in der obigen Version verwenden.

Answer 2

Ich glaube, diese Linie ist, wo Ihr Problem

if (action == null) action = "initialize"; 

beginnt, als ob Sie die Plugin aufrufen, ohne einen Parameter anzugeben, wird Aktion nicht definiert werden (nicht null).

man bedenkt, könnte dies zu

if (!(action)) action = "initialize"; 

bearbeiten zu ändern: Nachdem sah weiter, ich denke, das Problem ist, dass, wenn Sie den Datensatz Sie es nie einen Schlüssel geben nach dem Documentation of .data() method

Shop die unter Verwendung von Daten:

$this.data("selectedValue",$(this).index()); 

und abrufen es wie folgt aus:

siehe Arbeits Geige hier ->http://jsfiddle.net/7MAUv/