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

基于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); } }
            }
        });

    });
});

这很好用。 但我想多次显示上下文菜单项，因此我尝试：：

$('.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); } }
                }
            }
    });

});

---

但是我不能在这里使用for循环。如何执行此操作？

项的参数类型为object

试试这个

$('.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); } }
        }
    });
});

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

更新

下面的代码表示对象

{}

代码中的“数据”是对象的键， 那么下面的代码就不能使用了

{
    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 
    });
});

var-dataObjectValue
={name:data，callback:function（key，opt）{alert（“单击”+data）；}；
var dataObjectForItems={}；
对于（var i=0；iitems，其参数类型为object


试试这个

$('.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); } }
        }
    });
});

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

更新

下面的代码表示对象

{}

代码中的“数据”是对象的键，
那么下面的代码就不能使用了

{
    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 
    });
});

var-dataObjectValue
={name:data，callback:function（key，opt）{alert（“单击”+data）；}；
var dataObjectForItems={}；
for（var i=0；i基本上，您无法以您尝试的方式在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); } };
}

var menuItems={}；
对于（变量i=0；i<2；i++）{
var键=生成键（i）；
var data=GenerateData（）；
menuItems[键]=数据；
};
$.contextMenu({
选择器：'.关联菜单一'，
项目：菜单项
});
函数生成器键（索引）{
返回“数据”+索引；
}
函数生成数据（索引）{
返回{name:index，callback:function（key，opt）{alert（“单击”+index）；}；
}
基本上，您无法以您尝试的方式在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); } };
}

var menuItems={}；
对于（变量i=0；i<2；i++）{
var键=生成键（i）；
var data=GenerateData（）；
menuItems[键]=数据；
};
$.contextMenu({
选择器：'.关联菜单一'，
项目：菜单项
});
函数生成器键（索引）{
返回“数据”+索引；
}
函数生成数据（索引）{
返回{name:index，callback:function（key，opt）{alert（“单击”+index）；}；
}
你不能在
项目中有两个不同的
数据，这是肯定的。至少
数据和
数据1
。你不能在
项目中有两个不同的
数据，这是肯定的。至少
数据和
数据1
。