javascript - 使用 Jquery 上下文菜单

Question

在我的 MVC 4 应用程序中，我正在使用 jquery 处理 ContextMenus，并且也取得了相当大的成就，但目前我一直面临问题。

我使用上下文菜单的一个 View 如下所示:

我需要在右键单击每个元素(例如:First Document、Doc1 等)时添加一些菜单(即移动、删除、详细信息)，我的相应 Razor 源是:

 <div class="row">
   @foreach (var item in Model)
     {
        <div id="dc-row-@item.Id" class="col-sm-3 ">
        <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

   <ul id="contextmenu1" class="jqcontextmenu">
     <li><a href="#">Item 1a</a></li>
     <li><a href="#">Item 2a</a></li>
     <li><a href="#">Item 3a</a>
       <ul>
         <li><a href="#">Sub Item 3.1a</a></li>
         <li><a href="#">Sub Item 3.2a</a></li>
         <li><a href="#">Sub Item 3.3a</a></li>
      </ul>
    </li>
 </ul>
}

实现这个的脚本是:

jQuery(document).ready(function($){
    $('a.mylinks').addcontextmenu('contextmenu1') 
})

我还包含了一个 jscontextmenu js 文件以使其正常工作。

但我的问题是，通过这个我只能对第一个元素实现右键单击。我觉得有了我的文档就绪功能，contextmenu1 的 id 将仅应用于第一个元素，以便针对列表中的所有名称分配它，我需要为 ul 创建一些动态 ID，然后在我的脚本中使用它。

我尝试了一些可能性，使用计数器并递增它，然后将类分配给脚本函数，但这没有用。那么任何人都可以建议实现这一目标的方法。提前致谢。

Answer 1

为每个上下文菜单生成唯一的 id:

@foreach (var item in Model) {
    <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

    <ul id="contextmenu-@item.Id" class="jqcontextmenu">
        <li><a href="#">Item 1a</a></li>
        <li><a href="#">Item 2a</a></li>
        <li><a href="#">Item 3a</a></li>
    </ul>
}

在你的 js 代码中:

jQuery(function () {
    jQuery('a.mylinks').each(function () {
        var id = jQuery(this).next('.jqcontextmenu').attr('id');
        jQuery(this).addcontextmenu(id);
    });
});

JSFiddle Demo .