Question

我根据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); } };
}

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

2 个答案: