एक jQuery प्लगइन लिखें जो मान

Question

लौटाता है मैं एक jQuery प्लगइन लिख रहा हूं जो कुछ मामलों में कुछ डेटा संग्रहीत करता है।

मैं इसे एक बहुत ही लचीला तरीके से लिखना चाहता हूं, जहां मैं प्लगइन द्वारा संग्रहीत कुछ मूल्य प्राप्त करने के लिए इनपुट पैरामीटर बदल सकता हूं।

स्पष्टीकरण:

जब मैं फोन $("#any").myPlugin(), मेरे प्लगइन एक div और कुछ a अंदर बनाने initializes। a पर क्लिक करने से .data() विधि का उपयोग करके इसे .index() पर स्टोर किया जाएगा। यदि मैं $("#any").myPlugin("getSelection") पर कॉल करता हूं तो मैं .data() के साथ संग्रहीत मान प्राप्त करना चाहता हूं।

मैं क्या करने की कोशिश की थी:

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

सरल तत्वों को बनाने के कॉल:

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

और यहाँ मैं सूचकांक प्राप्त करने की कोशिश था, सफलता के बिना:

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

तो, क्या मैं कोशिश कर रहा हूं ऐसा करना संभव है?

Answer 1

आपको एक सा, ऊपर बदलने के लिए इस तरह की जरूरत है:

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

, जिसे आप इस तरह क्लिक किया सूचकांक बाहर निकल सकते हैं:

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

You can give it a try here, मौलिक समस्या यह है कि आप .each() लूप से एक एकल मान वापस करने का प्रयास कर रहे हैं, जो काम नहीं करता है। यह पहले ऑब्जेक्ट से डेटा को पकड़ता है जो चयनकर्ता से मेल खाता है (उदाहरण में #someElement)।.data() स्टोर अन्य चीजें स्टोर करता है, इसलिए आपको अपना मान एक कुंजी देना होगा, जैसे कि मैं ऊपर दिए गए संस्करण में 'index' का उपयोग कर रहा हूं।

Answer 2

मेरा मानना ​​है कि जहां आपकी समस्या

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

के रूप में यदि आप एक पैरामीटर निर्दिष्ट किए बिना प्लगइन कहते हैं, कार्रवाई अपरिभाषित हो जाएगा (शून्य नहीं) शुरू होता है इस लाइन है।

आप के लिए

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

संपादित इस बदलने पर विचार कर सकते हैं: आगे देखा करने के बाद, मुझे लगता है कि मुद्दा यह है कि जब आप डेटा सेट आप यह कभी नहीं एक प्रमुख Documentation of .data() method

स्टोर के अनुसार देना है डेटा का उपयोग कर:

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

और इस तरह इसे पुनः प्राप्त:

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

बेला यहां काम करते हुए देखना ->http://jsfiddle.net/7MAUv/