将多个项目添加到上下文菜单

我根据DOM元素中的数据使用右键单击上下文菜单。

它的Javascript代码是::

$(function(){ $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } }); }); }); 

哪个工作正常。 但我想显示上下文菜单项超过1次所以我试过::

 $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: for (var i = 0; i < 2; i++) { { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } } }); }); 

意味着它应该形成::

  items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }, data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }, } 

但我无法在此使用for循环。 怎么做到呢？

Answer 1

items的参数类型是object。

http://medialize.github.io/jQuery-contextMenu/docs.html

试试这个。

 $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data3: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } }); }); 

更新。

以下代码表示对象。

 {} 

你的代码中的“数据”是对象的关键，那么下面的代码就无法使用。

 { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } 

为什么要你使用循环???

如果您想要不同的上下文菜单具有相同的角色 试试这个。

 var dataObjectValue ={ name: data, callback: function (key, opt) { alert("Clicked on " + data); } }; var dataObjectForItems={}; for(var i=0; i<2; i++){ dataObjectForItems["data"+i]=dataObjectValue; } // result expected of dataObjectForItems //{ // data1: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } // data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } //} $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: dataObjectForItems }); }); 

Answer 2

基本上你不能像你想要的那样在JavaScript中构造一个对象。 for循环不会生成值数组，也不会生成对象。 您需要做的是在将对象作为值传递给上下文菜单初始化调用之前创建对象。

 var menuItems = {}; for (var i = 0; i < 2; i++) { var key = GenerateKey(i); var data = GenerateData(); menuItems[key] = data; }; $.contextMenu({ selector: '.context-menu-one', items: menuItems }); function GenerateKey(index) { return "data" + index; } function GenerateData(index) { return { name: index, callback: function (key, opt) { alert("Clicked on " + index); } }; }