如何为Dropzone预加载图片的移除链接添加属性？

我来帮你搞定这个问题！核心是要精准定位到当前预加载的mockFile对应的预览元素，再给该元素内的移除按钮添加ID，避免全局查找导致的ID覆盖问题。

关键原理 #

当你调用thisDropzone.options.addedfile.call(thisDropzone, mockFile)后，Dropzone会自动给mockFile对象绑定一个previewElement属性，这个属性就是当前文件对应的预览DOM节点。我们可以通过这个节点精准定位到对应的移除按钮，而不是全局查找所有.dz-remove元素。

修改后的完整代码 #

init: function() { 
  var thisDropzone = this; 
  $.get("url", function( data ) { 
    $.each(data, function(key,value){
      console.log(value); 
      var mockFile = { name: value.image_file_name, size: value.image_file_size }; 
      
      thisDropzone.options.addedfile.call(thisDropzone, mockFile); 
      thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.url); 
      
      thisDropzone.emit("complete", mockFile); // 移除进度条
      
      // ------------ 这里是修改后的代码 ------------
      // 获取当前mockFile对应的预览元素
      const previewElement = mockFile.previewElement;
      // 在该预览元素内找到移除按钮并设置ID
      $(previewElement).find('.dz-remove').attr('id', value.id);
      // -------------------------------------------
    }); 
  }, "json" ); 
}

为什么这样写？ #

• 用mockFile.previewElement定位：确保我们操作的是当前循环中这个文件对应的预览区域，不会影响其他预加载的图片移除按钮。
• 避免thisDropzone.find('.dz-remove')：这种全局查找会选中所有移除按钮，循环到最后一个文件时，所有按钮的ID都会被设置成最后一个value.id，这显然不是你想要的效果。

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