Dropzone 将动态属性附加到#dz-remove

Question

我正在尝试在 dropzone 上实施删除文件。我正在使用 rails，为了实现这一点，我必须向我的 dz-remove class 添加一个 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");
            }

fileID 是从我的图片控制器获取的：

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.

Answer 1

更改 $(".dz-remove").attr("id", val.id);到 $(".dz-remove").eq(index).attr("id", val.id);

$(".dz-remove") return 元素数组，你想将 id 添加到当前，使用 eq(元素索引)

Dropzone 将动态属性附加到#dz-remove

Dropzone append dynamic attributes to #dz-remove

javascript

jquery

ruby-on-rails

dropzone.js