如何使用 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()

它將幫助您檢查並告訴我您是否有任何問題