拖放区将动态属性追加到 #dz 删除

Dropzone append dynamic attributes to #dz-remove

本文关键字：#dz 删除 追加 属性 动态 拖放区      更新时间：2023-09-26

我正在尝试在拖放区上实现已删除的文件。我正在使用rails，为了实现这一点，我必须向我的dz-move类添加一个id = 1属性。

这是我当前的代码：

    var dropzone = new Dropzone ("#my-dropzone", {
        maxFiles: 50,
        maxFilesize: 30,
        paramName: "album[images][]",
        addRemoveLinks: true,
        uploadMultiple: true,
        autoProcessQueue: false,
        parallelUploads: 10,
        processing: function(){
                dropzone.options.autoProcessQueue = true;},
        init: function(){
              var thisDropZone = this;
              $.getJSON('image_list', function(data) {
                $.each(data, function(index, val) {
                      var mockFile = { name: val.name, size: val.size };
                      thisDropZone.emit("addedfile", mockFile);
                      thisDropZone.emit("thumbnail", mockFile, val.path);
                      thisDropZone.emit("complete", mockFile);
                    });
                });
              }

我试过这段代码：

    success: function(file, response){
                $(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
                $(file.previewElement).addClass("dz-success");
            }

文件ID是从我的图片控制器获取的： 

if @picture.save
  render json: { message: "success", fileID: @picture.id }, :status => 200
else

它可以工作，但是当我刷新浏览器时，属性id = 1消失了。我还想分开我的上传和编辑页面。

我还尝试使用以下代码从 json 文件中获取 id 值：

init: function(){
    var thisDropZone = this;
    $.getJSON('image_list', function(data) {
       $.each(data, function(index, val) {
           var mockFile = { name: val.name, size: val.size };
           thisDropZone.emit("addedfile", mockFile);
           thisDropZone.emit("thumbnail", mockFile, val.path);
           thisDropZone.emit("complete", mockFile);
           $(".dz-remove").attr("id", val.id);
        });
    });
}

同样，这可以工作并为我的 html 添加一个永久的 id = 1 属性。但附加的 val.id 是恒定的。例如，如果我有 3 张图像：

<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="1">Remove</a>
<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="1">Remove</a>
<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="1">Remove</a>

我想要的输出是：

<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="1">Remove</a>
<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="2">Remove</a>
<a href="javascript:undefined;" class: "dz-remove" data-dz-remove id="3">Remove</a>

我也尝试了$(".dz-remove").each但值仍然是恒定的而不是动态的。我也很困惑，因为当我console.log($(".dz-remove").attr("id", val.id))控制台值正确附加（id=1, id=2, id=3）。在html上，我得到的只是id=1.

change $（".

dz-remove"）.attr（"id"， val.id）; to$（".dz-remove"）.eq（index）.attr（"id"， val.id）;

$（".dz-remove"） 返回元素数组，你想给当前添加 id，使用 eq（元素索引）

相关文章：