英文:
Getting undefined when trying to get parent field attribute
问题
以下是您提供的内容的翻译部分：
起初，我有一个上传照片的按钮。
她看起来是这样的，而用于上传的脚本是专门为此id编写的。
但后来我需要创建几个下载按钮，每个按钮都应具有自己的下载功能。
我添加了这些按钮，以免为每个按钮制作单独的脚本，我试图使用不同的ID对它们进行标记，以便一个脚本可以使用。
但在脚本本身中，我遇到了问题，特别是在从HTML中获取data attr的值方面。
这不是完整的脚本，我尽量缩短了它以进行演示，否则我通常使用脚本从dropzone下载，而在初始化开始时会在那里指定ID，但现在我需要为每个按钮单独接收ID。
在这里，我遇到了问题，我尝试从field_info字段中获取data-field_photo_id，但我得到了undefined，而且出于某种原因，对于任何字段的任何属性都是如此。
英文:
Initially, I had one button to upload a photo
She looked like this, and the script for uploading specifically for this id
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="5">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" href="#">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div id="dz_params_field_photo"
data-type="pipeline" data-entity_id="11"
style="display: none">
</div>
<div id="dz_field_photo_uploaded"></div>
</div>
</div>
But then I needed to make several of these download buttons, and each button should have its own download
I've added these buttons so that I don't have to make a separate script for each button, I'm trying to tag them with different IDs so that one script can be used
But I have a problem in the script itself, specifically in getting the values of data attr from html
This is not a complete script, I shortened it as much as possible for demonstration, otherwise I usually used the script to download from the dropzone, and the ID was indicated there at the beginning of initialization, but now I need to separately receive the ID for each button
And here I have a problem, I try to get data-field_photo_id from the field_info field but I get undefined, and for some reason it turns out for any attribute of any field
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
(function($){
$.dispatcherFiles = {
$filesDropzone: null,
$parallelUploads: 100,
$maxFiles: 10,
$files: [],
cacheDom: function(){
this.$body = $('body');
},
functions: {
uploadFiles: function (e) {
let field = $(e.currentTarget).closest('field').find('field_info');
let photoID = $(e.currentTarget).closest('field').find('field_info').attr('data-field_photo_id');
console.log(field);
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);
<!-- language: lang-css -->
.field {
margin: 50px;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="5">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" href="#">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div id="dz_params_field_photo_5"
data-type="pipeline" data-entity_id="11"
style="display: none">
</div>
<div id="dz_field_photo_5_uploaded"></div>
</div>
</div>
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="6">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" href="#">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div id="dz_params_field_photo_6"
data-type="pipeline" data-entity_id="12"
style="display: none">
</div>
<div id="dz_field_photo_6_uploaded"></div>
</div>
</div>
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="7">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" href="#">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div id="dz_params_field_photo_7"
data-type="pipeline" data-entity_id="13"
style="display: none">
</div>
<div id="dz_field_photo_7_uploaded"></div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
你的代码在以下行缺少class符号（.）：
let field = $(e.currentTarget).closest('.field').find('.field_info');
let photoID = $(e.currentTarget).closest('.field').find('.field_info').attr('data-field_photo_id');
英文:
Your code missing the class symbol (.) in the following lines:
let field = $(e.currentTarget).closest('.field').find('.field_info');
let photoID = $(e.currentTarget).closest('.field').find('.field_info').attr('data-field_photo_id');
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论