获取父元素data-field_photo_id属性时返回undefined问题排查

核心问题 #

你的代码中jQuery选择器存在错误——closest('field')和find('field_info')是在查找名为<field>和<field_info>的HTML标签，但实际上这两个都是CSS类，需要在选择器前加上.。这就是导致你获取data-field_photo_id时返回undefined的直接原因。

修正后的JavaScript代码 #

(function($){
    $.dispatcherFiles = {
        $filesDropzone: null,
        $parallelUploads: 100,
        $maxFiles: 10,
        $files: [],

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            uploadFiles: function (e) {
                // 修正类选择器，添加.前缀
                let $fieldContainer = $(e.currentTarget).closest('.field');
                let $fieldInfo = $fieldContainer.find('.field_info');
                // 使用.data()方法读取data属性，更符合jQuery规范
                let photoID = $fieldInfo.data('field_photo_id');
                console.log($fieldInfo);
                console.log(photoID);
            },
        },

        events: function(){
            this.$body.on('click', '.field .field_form .btnUpload', this.functions.uploadFiles.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

关键修正点 #

• 修正选择器：将closest('field')改为closest('.field')，find('field_info')改为find('.field_info')，确保正确选中目标类元素
• 改用.data()方法获取data属性：这是jQuery处理data-*属性的标准方式，能自动识别数据类型，比.attr()更简洁可靠
• 优化DOM查询：先获取父级容器再查找子元素，减少重复DOM遍历操作

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