如何通过函数获取元素data-attribute？点击任务返回值异常求助

嘿，我一眼就看出问题所在啦！你现在遇到的情况，是因为点击事件绑定在body上后，没有正确捕获到当前被点击的任务元素，反而每次都获取了第一个带有目标data属性的元素的值，所以不管点哪个任务，弹窗都只显示“Projekt 1”。

下面给你两种针对性的解决方案，选适合你DOM结构的就行：

方案1：直接把事件委托到任务元素上（更高效） #

如果你的任务元素本身带有对应的data属性（比如data-project="blue"、data-project="green"），可以直接把点击事件委托到这些元素上，这样$(this)就精准指向当前被点击的任务：

jQuery(document).ready(function() {
    // 保留你原有的克隆和滚动代码
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);

    // 修正后的点击事件
    $("body").on("click", '[data-project]', function(e) {
        // 获取当前点击元素的data-project值
        var projectName = $(this).data('project');
        // 替换成你的弹窗逻辑，比如alert或者自定义弹窗赋值
        alert(projectName);
        // 示例：如果是自定义弹窗，比如 $('.modal-text').text(projectName);
    });
});

方案2：处理嵌套元素的点击（如果任务里有子元素） #

如果你的任务元素是嵌套结构（比如点击的是任务里的文字、图标等子元素），可以用closest()方法向上查找最近的带有目标data属性的父元素，确保能定位到正确的任务：

jQuery(document).ready(function() {
    // 保留原有的克隆和滚动代码
    jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82);

    // 修正后的点击事件
    $("body").on("click", function(e) {
        // 找到当前点击元素所属的任务元素
        var targetTask = $(e.target).closest('[data-project]');
        // 确认找到了目标元素再执行逻辑
        if (targetTask.length > 0) {
            var projectName = targetTask.data('project');
            // 弹窗显示对应的值
            alert(projectName);
        }
    });
});

关键说明 #

• 核心问题就是你之前的代码没有精准定位到当前被点击的那个任务元素，而是默认取了DOM中第一个匹配[data-project]的元素，所以才会一直显示同一个内容。
• 记得把代码里的data-project替换成你实际使用的data属性名（比如如果是data-task就改成data-task）。

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