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

Add Multiple items to Context Menu

本文关键字：上下文 菜单 添加 项目      更新时间：2023-09-26

我使用基于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循环。如何做到这一点？

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

基本上，你不能用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); } };
}
相关文章：