添加多個項目到上下文菜單

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

項目的參數類型是對象。

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