Wie man Parameter an ein jQuery-Plugin weiterleitet, das mit den ausgewählten Elementen in Beziehung steht

Ich habe das folgende Plugin erstellt, um meine Frage zu illustrieren. http://jsbin.com/vorahohali Wie man Parameter an ein jQuery-Plugin weiterleitet, das mit den ausgewählten Elementen in Beziehung steht

Wie kann ich auf die ausgewählten id Elemente innerhalb des Plugins zugreifen?

Während ich die ausgewählte <a> mit this innerhalb des Plugins sicher zugreifen können, muss das Plugin der Lage sein, allgemein umgesetzt werden jeden Wert von id verwenden und alle Werte in param sollte außerhalb des Plugin definiert werden. Beispielsweise steht id möglicherweise nicht mit dem ausgewählten Element wie $('#MyID').val() in Verbindung, oder es kann etwas mit dem Element zu tun haben, aber nicht immer auf die gleiche Weise wie $(this).data('id') oder $(this).parent().data('id').

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Testing</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      (function($){ 
       var defaults = {param: {},}; 
       var methods = { 
        init : function (options) { 
         var settings = $.extend({}, defaults, options); 
         return this.each(function() { 
          $(this).click(function(e) { 
           //How do I pass and receive settings.param.id 
           console.log(settings.param,settings.param.myInput,settings.param.id,settings.param.id()); 
          }); 
         }); 
        }, 
       }; 

       $.fn.bla = function(method) { 
        if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} 
        else if (typeof method === 'object' || ! method) {return methods.init.apply(this, arguments);} 
         else {$.error('Method ' + method + ' does not exist on jQuery.bla');}  
       }; 

       }(jQuery) 
      ); 
      $(function(){ 
       $("a").bla({param:{id:function(){$(this).data('id')},myInput:$('#myInput').val()},}); 
      }); 
     </script> 
    </head> 
    <body> 
     <a href="javascript:void(0)" data-id="How do I get this value?">click</a> 
     <input id="myInput" type="hidden" value="My Input Value" /> 
    </body> 
</html>

Quelle

2016-05-31 user1032531

Huh? Die Anker, auf denen das Plugin läuft, wären 'this' innerhalb des Plugins, und es ist sogar in jQuery vorgepackt. – adeneo

Verwenden Sie 'dies' innerhalb der Funktion – DinoMyte

@adeneo Sowieso von außerhalb des Plugins zu tun? 'id' muss nicht an das Element gebunden sein und wird außerhalb des Plugins definiert. – user1032531

nahm ich ein paar Sachen hier raus, das mich verwirrt, wie die Funktion für ID etc, aber ich habe es funktioniert, indem von nur laufen .bla auf all a-Tags Swapping mit .each() wie

$('a').each(function(){$(this).bla(OPTIONS)});

http://jsbin.com/huyesanewa/edit?html,console,output

diese Weise können Sie jeder vorbei sind die richtigen Werte

Quelle

2016-05-31 19:10:54

Danke Caleb, Während es funktioniert, glaube ich nicht, dass es die "typische" Art ist, Ventile auf einem Plugin zu übergeben. Ich würde es gerne ohne die 'each()' Methode machen können. – user1032531

Nicht ideal .bla funktionieren, aber das beste, was ich kam mit. Ich würde mich über jede konstruktive Kritik freuen. Danke

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Testing</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script> 
     <script type="text/javascript"> 

      (function($){ 
       var defaults = {param: {},}; 
       var methods = { 
        init : function (options) { 
         var settings = $.extend({}, defaults, options); 
         return this.each(function() { 
          $(this).click(function(e) { 
           for (var elem in settings.param) { 
            if (typeof settings.param[elem] === "function") { 
             settings.param[elem]=settings.param[elem](this); 
            } 
           } 
           console.log(settings.param); 
          }); 
         }); 
        }, 
       }; 

       $.fn.bla = function(method) { 
        if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} 
        else if (typeof method === 'object' || ! method) {return methods.init.apply(this, arguments);} 
         else {$.error('Method ' + method + ' does not exist on jQuery.bla');}  
       }; 

       }(jQuery) 
      ); 
      $(function(){ 
       $("a").bla({param:{id:function(t){return $(t).data('id')},myInput:$('#myInput').val()},}); 
      }); 
     </script> 
    </head> 
    <body> 
     <a href="javascript:void(0)" data-id="How do I get this value?">click</a> 
     <input id="myInput" type="hidden" value="My Input Value" /> 
    </body> 
</html>

Quelle

2016-05-31 19:43:17 user1032531

Wie man Parameter an ein jQuery-Plugin weiterleitet, das mit den ausgewählten Elementen in Beziehung steht

Antwort

Verwandte Themen