2010-09-02 17 views
5

Sto scrivendo un plugin jQuery che memorizza alcuni dati in alcuni casi.Scrivere un plugin jQuery che restituisce valori

Mi piacerebbe scriverlo in un modo molto flessibile, dove potrò modificare un parametro di input per ottenere alcuni valori che sono stati memorizzati dal plugin.

Spiegazione:

Quando chiamo $("#any").myPlugin(), il mio plug-inizializza la creazione di un div e alcuni a all'interno. Fare clic su un a lo memorizzerà .index() utilizzando il metodo .data(). Se chiamo $("#any").myPlugin("getSelection") allora mi piacerebbe ottenere il valore memorizzato con .data().

quello che avevo provato:

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

chiamata semplice per creare gli elementi:

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

E qui mi aveva cercato di ottenere l'indice, senza sucesso:

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

Quindi, è possibile fare ciò che sto provando?

risposta

11

è necessario cambiare l'ordine un po ', come questo:

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

La si può ottenere l'indice cliccato come questo:

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

You can give it a try here, il problema fondamentale è che si sta tentando di restituire un singolo valore da un ciclo .each(), che non funziona. Questo invece preleva i dati dal primo oggetto che corrisponde al selettore (#someElement nell'esempio).Anche .data() negozi altro cose, quindi è necessario dare il vostro valore una chiave, come sto usando 'index' nella versione di cui sopra.

1

credo che questa linea è dove il vostro problema comincia

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

come se si chiama il plugin senza specificare un parametro, sarà indefinito azione (non nullo).

si potrebbe pensare di cambiare questo per

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

Edit: Dopo aver guardato oltre, penso che il problema è che quando si imposta i dati che non dà una chiave secondo il Documentation of .data() method

Conservare il dati utilizzando:

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

e recuperare in questo modo:

$('#plugin-container').data("selectedValue") 

guarda il violino a lavorare qui ->http://jsfiddle.net/7MAUv/

+0

Grazie indicando l'indefinito, ma potrebbe influire solo sull'inizializzazione. Il ritorno quando viene impostata l'azione corretta non è risolto. –

+0

Ma con l'inizializzazione non funziona, non otterrai mai i nuovi elementi, non associ mai gli eventi di clic e non imposti mai i dati. Pertanto, non riceverai mai la selezione più tardi quando chiami con il parametro getSelection. – Jamiec

Problemi correlati