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

Question

我正在尝试在 dropzone 上实现一个已删除的文件。我正在使用 rails，为了实现这一点，我必须在我的 dz-remove 类中添加一个 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") 返回元素数组，你想将 id 添加到当前，使用 eq(index of element)