如何使用 JQuery 正确地动态传递数据 ID

Question

我有一个自定义上下文菜单，它应该继承单击鼠标右键的列表项的 data-id 值。

更明确地说，我有一个国家的无序列表。 当用户右键单击这些国家/地区中的任何一个（列表项）时，会弹出一个上下文菜单。 我希望将 data-id 值传递给上下文菜单的列表项。

根据我在 Elements 检查器/窗口上看到的内容，数据似乎已正确且成功地传递。 在第一次点击时，数据 ID 被成功拉取。 然而，当用户点击第二个国家，或者更确切地说是列表项时，它仍然会拉出用户右键点击的第一个国家的数据 ID。 我究竟做错了什么？

这是文件的样子：

 // When the ESC key is pressed, $(document).bind("keyup", function(event) { // If ESC is pressed, if (event.keyCode == 27) { // Hide Context Menu $('.context-menu').hide(); $('.context-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); } }); // When user clicks on document, $(document).on("click", function() { $('.context-menu').hide(); // hide context menu $('.context-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); }); $(document).ready(function() { $('.members-list').on("contextmenu", "li", function(e) { e.preventDefault(); var id = $(this).data("id"); $('.context-menu').each(function() { $(this).find("li").each(function() { $(this).attr("data-id", id); }); }) $('.context-menu') .css({ top: e.pageY + 'px', left: e.pageX + 'px' }) .show(); }); $('.context-menu').on("click", "li", function() { var id = $(this).data("id"); var action = $(this).data("action"); switch (action) { case "view": alert("View: " + action + " " + id); break; case "edit": alert("Edit: " + action + " " + id); break; case "delete": alert("Delete: " + action + " " + id); break; } // Hide Context Menu $('.context-menu').hide(); // Remove data id $('.users-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); }); });

 *, *::before, *::after { margin: 0; padding: 0; outline: 0; } ul, ol { list-style: none; } .members-list li { color: ghostwhite; cursor: pointer; display: block; background: black; padding: 4px; margin-bottom: 2px; } .context-menu { display: none; padding: 2px; position: absolute; background: ghostwhite; } .context-menu li { padding: 6px; cursor: context-menu; border-bottom: 1px solid gray; } .context-menu li:last-child { border-bottom: 0; } .context-menu li:hover { color: ghostwhite; background: gray; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="members"> <ul class="members-list"> <li class="member" data-id="south-africa">South Africa</li> <li class="member" data-id="england">England</li> </ul> </div> <div class="context-menu"> <ul class="context-menu-list"> <li class="context-menu-item" data-action="view"> <div class="menu-item"> View Member </div> </li> <li class="context-menu-item" data-action="edit"> <div class="menu-item"> Edit Member </div> </li> <li class="context-menu-item" data-action="delete"> <div class="menu-item"> Delete Member </div> </li> </ul> </div>

我有元素检查的屏幕截图。 请在下面找到它们：

Answer 1

您好 替换以下代码

var id = $(this).data("id"); with var id =$(this).attr("data-id"); 

在此行之后 $('.context-menu').on("click", "li", function()

它将帮助您检查并告诉我您是否有任何问题