如何根据条件动态更改上下文菜单中的名称

Question

我正在为 jQuery 使用此上下文菜单插件：

http://swisnl.github.io/jQuery-contextMenu/demo/trigger-left-click.html.

我正在尝试通过一个简单的条件动态更改菜单项的名称。不幸的是，无法动态更改菜单项的名称，或者我不知道该怎么做...

我这样试过：

   items: {
           "item": {name: (x > 10) ? 'name1' : 'name2', disabled: false},
           "sep1": "----------------",
           ....
   }

但它不起作用。然后我用匿名函数试了一下：

 items: {
         "item": {name: function(){ return (x > 10) ? 'name1' : 'name2'; }, disabled: false},
         "sep1": "----------------",
         ....
 }

但效果不佳... 现在我没有其他线索，所以我向你求助。你对我有什么有用的建议吗？感谢任何帮助。

提前致谢。

Answer 1

名称会在开头定义，不是每次点击。如果你想每次都重新定义项目名称，你应该这样做：

var x = 0;
$(function() {
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      copy: {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: function(){
        return 'icon icon-quit';
      }}
    }
  });

  $('.context-menu-one').on('contextmenu', function(e){
    $('.icon-edit span').text('x: ' + x);
    x++;
  });    
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js"></script>
  <link rel="stylesheet" href="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
</body>
</html>

Answer 2

我认为你应该使用构建选项。这使得在运行时构建菜单成为可能，因此它可以在显示菜单之前评估表达式。

http://swisnl.github.io/jQuery-contextMenu/docs.html#build

$.contextMenu({
selector: 'span.context-menu',
build: function($triggerElement, e){
    var conditionalName = (x > 10) ? 'name1' : 'name2';
    return {
        callback: function(){},
        items: {
            menuItem: {name: conditionalName}
        }
    };
}

});

如何根据条件动态更改上下文菜单中的名称

How to change name in context menu dynamicaly by a condition

jquery

contextmenu