尝试获取父字段属性时收到未定义的结果。

huangapple
go评论95阅读模式
英文:

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

  1. <div class="field">
  2.     <label>Photos</label>
  3. 	<div class="field_info" data-field_photo_id="5">
  4. 		<div class="value" data-item_id=""></div>
  5. 	</div>
  6. 	<div class="field_form">
  7. 	    <a class="btn btn-dark btn-md btnUpload" href="#">
  8.             <i class="fa fa-cloud-upload"></i> Upload
  9.         </a>
  10. 		<div id="dz_params_field_photo" 
  11. 		    data-type="pipeline" data-entity_id="11" 
  12. 		    style="display: none">
  13. 		</div>
  14. 		<div id="dz_field_photo_uploaded"></div>
  15. 	</div>
  16. </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 -->

  1. (function($){
  2.     $.dispatcherFiles = {
  3.         $filesDropzone: null,
  4.         $parallelUploads: 100,
  5.         $maxFiles: 10,
  6.         $files: [],
  8.         cacheDom: function(){
  9.             this.$body = $(&#39;body&#39;);
  10.         },
  12.         functions: {
  13.             uploadFiles: function (e) {
  14.                 let field = $(e.currentTarget).closest(&#39;field&#39;).find(&#39;field_info&#39;);
  15.                 let photoID = $(e.currentTarget).closest(&#39;field&#39;).find(&#39;field_info&#39;).attr(&#39;data-field_photo_id&#39;);
  16.                 console.log(field);
  17.                 console.log(photoID);
  18.             },
  19.         },
  21.         events: function(){
  22.             this.$body.on(&#39;click&#39;, &#39;.field .field_form .btnUpload&#39;, this.functions.uploadFiles.bind(this));
  23.         },
  25.         init: function () {
  26.             this.cacheDom();
  27.             this.events();
  28.         }
  29.     };
  31.     $.dispatcherFiles.init();
  33. })(jQuery);

<!-- language: lang-css -->

  1. .field {
  2.   margin: 50px;
  3. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot;  rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot;  crossorigin=&quot;anonymous&quot;&gt;
  3. &lt;link href=&quot;http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css&quot; 
  4.   rel=&quot;stylesheet&quot;  type=&#39;text/css&#39;&gt;
  6. &lt;div class=&quot;field&quot;&gt;
  7.     &lt;label&gt;Photos&lt;/label&gt;
  8. 	&lt;div class=&quot;field_info&quot; data-field_photo_id=&quot;5&quot;&gt;
  9. 		&lt;div class=&quot;value&quot; data-item_id=&quot;&quot;&gt;&lt;/div&gt;
  10. 	&lt;/div&gt;
  11. 	&lt;div class=&quot;field_form&quot;&gt;
  12. 	    &lt;a class=&quot;btn btn-dark btn-md btnUpload&quot; href=&quot;#&quot;&gt;
  13.             &lt;i class=&quot;fa fa-cloud-upload&quot;&gt;&lt;/i&gt; Upload
  14.         &lt;/a&gt;
  15. 		&lt;div id=&quot;dz_params_field_photo_5&quot; 
  16. 		    data-type=&quot;pipeline&quot; data-entity_id=&quot;11&quot; 
  17. 		    style=&quot;display: none&quot;&gt;
  18. 		&lt;/div&gt;
  19. 		&lt;div id=&quot;dz_field_photo_5_uploaded&quot;&gt;&lt;/div&gt;
  20. 	&lt;/div&gt;
  21. &lt;/div&gt;
  23. &lt;div class=&quot;field&quot;&gt;
  24.     &lt;label&gt;Photos&lt;/label&gt;
  25. 	&lt;div class=&quot;field_info&quot; data-field_photo_id=&quot;6&quot;&gt;
  26. 		&lt;div class=&quot;value&quot; data-item_id=&quot;&quot;&gt;&lt;/div&gt;
  27. 	&lt;/div&gt;
  28. 	&lt;div class=&quot;field_form&quot;&gt;
  29. 	    &lt;a class=&quot;btn btn-dark btn-md btnUpload&quot; href=&quot;#&quot;&gt;
  30.             &lt;i class=&quot;fa fa-cloud-upload&quot;&gt;&lt;/i&gt; Upload
  31.         &lt;/a&gt;
  32. 		&lt;div id=&quot;dz_params_field_photo_6&quot; 
  33. 		    data-type=&quot;pipeline&quot; data-entity_id=&quot;12&quot; 
  34. 		    style=&quot;display: none&quot;&gt;
  35. 		&lt;/div&gt;
  36. 		&lt;div id=&quot;dz_field_photo_6_uploaded&quot;&gt;&lt;/div&gt;
  37. 	&lt;/div&gt;
  38. &lt;/div&gt;
  40. &lt;div class=&quot;field&quot;&gt;
  41.     &lt;label&gt;Photos&lt;/label&gt;
  42. 	&lt;div class=&quot;field_info&quot; data-field_photo_id=&quot;7&quot;&gt;
  43. 		&lt;div class=&quot;value&quot; data-item_id=&quot;&quot;&gt;&lt;/div&gt;
  44. 	&lt;/div&gt;
  45. 	&lt;div class=&quot;field_form&quot;&gt;
  46. 	    &lt;a class=&quot;btn btn-dark btn-md btnUpload&quot; href=&quot;#&quot;&gt;
  47.             &lt;i class=&quot;fa fa-cloud-upload&quot;&gt;&lt;/i&gt; Upload
  48.         &lt;/a&gt;
  49. 		&lt;div id=&quot;dz_params_field_photo_7&quot; 
  50. 		    data-type=&quot;pipeline&quot; data-entity_id=&quot;13&quot; 
  51. 		    style=&quot;display: none&quot;&gt;
  52. 		&lt;/div&gt;
  53. 		&lt;div id=&quot;dz_field_photo_7_uploaded&quot;&gt;&lt;/div&gt;
  54. 	&lt;/div&gt;
  55. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你的代码在以下行缺少class符号（.）：

  1. let field = $(e.currentTarget).closest('.field').find('.field_info');
  2. let photoID = $(e.currentTarget).closest('.field').find('.field_info').attr('data-field_photo_id');
英文:

Your code missing the class symbol (.) in the following lines:

  1. let field = $(e.currentTarget).closest(&#39;.field&#39;).find(&#39;.field_info&#39;);
  2. let photoID = $(e.currentTarget).closest(&#39;.field&#39;).find(&#39;.field_info&#39;).attr(&#39;data-field_photo_id&#39;);

huangapple
  • 本文由 发表于 2023年5月29日 18:44:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76356667.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定