如何使用JQuery

Question

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

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

根据我在Elements检查器/窗口中看到的内容，数据似乎正确且成功地传递。首次单击时，将成功提取data-id。但是，当用户点击第二个国家/地区，或者更确切地说是列出项目时，它仍然会提取用户右键单击的第一个国家/地区的数据ID。我做错了什么？

这是文件的样子：

＆＃13;

＆＃13;

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

＆＃13;

 *,
 *::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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

嗨替换以下代码

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

在此行之后$（'。context-menu'）。on（“click”，“li”，function（）

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