基于swisnl的jQuery contextMenu：按点击元素添加自定义数据

嘿，我来帮你搞定这个给contextMenu添加自定义数据的问题！针对你那两个带with-cool-menu类的div，我们可以利用swisnl的jQuery-contextMenu插件的回调功能，根据点击元素的属性动态注入内容，这里有两种实用的方法：

方法一：用build回调动态生成菜单（推荐） #

这个方法会在每次右键点击元素时触发，能让你完全根据当前点击的元素定制菜单内容，非常灵活。

先看你的HTML结构：

<div id="1" class="with-cool-menu">元素1</div>
<div id="2" class="with-cool-menu">元素2</div>

然后是插件配置代码：

$.contextMenu({
    selector: '.with-cool-menu', // 匹配所有目标元素
    build: function($trigger, e) {
        // $trigger就是当前被右键点击的元素，直接获取它的属性
        const elementId = $trigger.attr('id');
        // 自定义数据可以是任意内容，比如基于元素ID生成的信息
        const customElementData = `专属数据：元素ID-${elementId}`;
        
        // 返回定制后的菜单配置，把自定义数据融入菜单项
        return {
            items: {
                view: {
                    name: '查看详情',
                    callback: function(key, options) {
                        // 在这里可以使用自定义数据和点击元素信息
                        console.log(`点击了「${key}」，${customElementData}`);
                    }
                },
                edit: {
                    name: `编辑元素${elementId}`,
                    callback: function() {
                        alert(`开始编辑元素${elementId}！`);
                    }
                },
                // 甚至可以直接把自定义数据做成一个菜单项展示
                info: {
                    name: customElementData,
                    disabled: true // 设置为不可点击的信息项
                }
            }
        };
    }
});

方法二：用全局callback统一处理菜单点击 #

如果你的菜单项结构是固定的，只是需要在点击时获取当前元素的自定义数据，用全局callback更简单：

$.contextMenu({
    selector: '.with-cool-menu',
    items: {
        view: {name: '查看详情'},
        edit: {name: '编辑'}
    },
    callback: function(key, options) {
        // $(this)就是当前被点击的元素，直接提取属性生成自定义数据
        const $clickedElem = $(this);
        const elemId = $clickedElem.attr('id');
        const customData = `点击了「${key}」，目标元素ID：${elemId}`;
        
        window.console && console.log(customData) || alert(customData);
    }
});

两种方法各有优势：build适合需要根据元素属性动态调整菜单项（比如某些元素显示特定菜单）的场景；全局callback适合菜单项固定，只需要在点击时获取元素信息的情况。

这样不管你点击哪个带with-cool-menu类的div，菜单都能带上对应元素的自定义数据啦！

内容的提问来源于stack exchange，提问作者Masha