Boucle à travers les options du plugin jQuery

Question

Je ne suis pas sûr de savoir comment faire cela, je pensais que je le faisais bien, mais apparemment pas. Dans le 2ème bloc de code, vous verrez un appel de console.log() et la façon dont pensé vous traverserait tous les item s mais cela ne fonctionne pas. Comment ferais-je cela? Aussi, c'est un travail en cours donc tout le code commenté, mais c'est la partie principale!

Merci d'avance!

Donc, j'ai pour mon appel plugin jQuery:

$('p').contextMenu({ 
       item:{ 
        name:'Back', 
        action:function(){ 
         alert('Back!'); 
        }, 
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_back.png' 
       }, 
       item:{ 
        name:'Forward', 
        action:function(){ 
         alert('Forward!'); 
        }, 
        icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_forward.png' 
       } 
      }); 

Et voici mon code plugin jQuery réelle:

(function($){ 
       $.fn.extend({ 
        //plugin name - animatemenu 
        contextMenu: function(menuitems,options) { 
         if(!options){options == null;} 
         //Settings list and the default values 
         var defaults = { 
         }; 

         var options = $.extend(defaults, options); 

         return this.each(function() { 
          var o =options; 

          //Assign current element to variable, in this case is UL element 
          var $obj = $(this);    

          $obj.mousedown(function(event) { 
           switch (event.which) { 
            case 1: //Left 
            //alert('Left mouse button pressed'); 
            break; 
            case 2: //Middle 
            //alert('Middle mouse button pressed'); 
            break; 
            case 3: //Right 
            //menuitems.item.action(); 
            for(x in menuitems){ 
             console.log(menuitems.item[x]) 
            } 
            break; 
            default: //Unknown 

           } 
          }); 

         }); 
        } 
       }); 
      })(jQuery); 

Answer 1

Votre menuitems objet ne peut avoir une item propriété et il devient écrasé dans votre déclaration. Faire menuitems un tableau à la place:

$('p').contextMenu([ 
    { 
     name:'Back', 
     action:function(){ 
      alert('Back!'); 
     }, 
     icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_back.png' 
    }, 
    { 
     name:'Forward', 
     action:function(){ 
      alert('Forward!'); 
     }, 
     icon:'http://cdn.iconfinder.net/data/icons/crystalproject/16x16/actions/agt_forward.png' 
    } 
]); 

Si vous pensez qu'il doit être un peu simplifié pour les développeurs que vous faites allusion, peut-être définir simplement les éléments comme une première variable.

var items = [ {name: 'Forward'}, {name: 'Back'} ]; 
$('p').contextMenu(items); 

Ensuite, vous pouvez accéder aux deux articles la façon dont vous avez initialement prévu:

var len = menuitems.length; 
for (var i = 0; i < len; i++;){ 
    console.log(menuitems[i]); 
} 

Tout comme une note de côté, j'ai changé votre boucle for in à une for régulière. La boucle for in est vraiment inefficace et devrait être évitée. (Ma boucle de remplacement pourrait aussi être écrite plus efficacement, mais la syntaxe commence à sembler étrange et votre commentaire semble indiquer que les développeurs avec lesquels vous travaillez pourraient être un peu confus (pas de manque de respect).