2010-09-02 12 views
5

Bazı durumlarda bazı verileri depolayan bir jQuery eklentisi yazıyorum.Değerleri döndüren bir jQuery Eklentisi Yazma

Çok esnek bir şekilde yazmak istiyorum, eklenti tarafından saklanan bir değer elde etmek için bir giriş parametresini değiştirebileceğim.

Açıklama:

ben $("#any").myPlugin() diyoruz, benim eklenti bir div ve içindeki bazı a oluşturarak başlatır. Bir a üzerine tıklamak .data() yöntemini kullanarak .index() kaydedecektir. $("#any").myPlugin("getSelection")'u ararsam, .data() ile saklanan değeri almak istiyorum. olmadan okunamaz burada

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

Ve endeksi almaya çalıştı etmişti,: öğeleri oluşturmak için

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

Basit çağrı: Ben çalışmıştı Ne

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

Yani, denediğimi yapmak mümkün mü?

cevap

11

Böyle, düzeni biraz yukarı değiştirmek gerekir:

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

böyle tıklandığında endeksi çıkabiliriz:

You can give it a try here, temel sorun, çalışmayan bir .each() döngüsünden tek bir değer döndürmeye çalışmaktır. Bunun yerine, seçiciyle eşleşen ilk nesneden veriyi alır (örnekte #someElement).Ayrıca .data()diğer şeyler, bu yüzden yukarıdaki sürümde 'index' kullanıyorum gibi, bir anahtar değeri vermeniz gerekir.

1

Ben senin sorunun

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

Eğer bir parametre belirtmeden eklentisi ararsanız, aksiyon tanımsız olacaktır olarak (boş değil) başladığı bu çizgi olduğuna inanıyoruz.

Eğer

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

Düzenle bu değişen düşünebiliriz: Daha baktım, ben sorunu verileri ayarladığınızda Documentation of .data() method

Store'a göre bunu bir anahtar verir asla olduğunu düşünüyorum olması

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

ve şu şekilde almak: veri kullanılarak

0 burada keman çalışma bkz ->http://jsfiddle.net/7MAUv/

+0

Tanımsız hakkında işaret ederek teşekkürler, ancak yalnızca başlatmayı etkileyebilir. Doğru eylemin ayarlandığı zaman geri dönüşü çözülmez. –

+0

Ancak, başlatma işlemi çalışmadığında, yeni öğeleri asla alamazsınız, asla tıklama etkinliklerini eklemezsiniz ve asla verileri ayarlamazsınız. Bu nedenle, getSelection parametresiyle arama yaparken seçimi daha sonra asla alamazsınız. – Jamiec