創建未知數量的JackUp實例的最佳方法

Question

我們使用JackUp在Rails中上傳Ajax圖片。 我們選擇它是因為它承擔的范圍不大，而且重量很輕。

在它的示例代碼之后，我們想到了這樣的東西：

  let jackUp = new JackUp.Processor({
    path: '/images'
  });

  jackUp.on('upload:imageRenderReady', (e, options) => {
    options.image.attr("data-id", options.file.__guid__).css({
      border: "5px solid red"
    });
    $('[data-behavior=image-block-container]').prepend(options.image);

  }).on("upload:sentToServer", (e, options) => {
    $(`img[data-id='${options.file.__guid__}']`).css({
      borderColor: 'yellow'
    });

  }).on("upload:success", (e, options) => {
    $(`img[data-id='${options.file.__guid__}']`).css({
      borderColor: "green"
    });

  }).on("upload:failure", (e, options) => {
    alert(`'${options.file.name}' upload failed; please retry`);
    $(`img[data-id='${options.file.__guid__}']`).remove();
  });

  $('.file-drop').jackUpDragAndDrop(jackUp);

  $(document).bind('drop dragover', e => {
     e.preventDefault();
  });

使用一個圖像上傳按鈕（分類為file-drop ），可以按預期工作。 但是，頁面上這些圖像上載按鈕的數量將是未知的。

如果有一個以上的上傳按鈕，則每次添加文件時，它都會附加到所有image-block-container元素中，而不只是目標對象。 似乎jackUp沒有觸發它的元素的概念。

---

允許每個上傳按鈕知道它叫什么的最好方法是什么？ 我嘗試將其放在.on('drop'...塊中。這使我可以訪問該元素，但沒有觸發JackUp的事件。

感謝任何有關輕量級Rails友好ajax上傳gem的幫助或建議！

Answer 1

您正在使用以下查詢選擇器廣泛地匹配DOM的多個部分： $('[data-behavior=image-block-container]') 。 可能有多個與此選擇器匹配的元素是您怪異的更新問題的原因。

如果您只想定位用戶正在與之交互的元素，則upload:imageRenderReady事件處理程序中的e變量應該具有[target][1] ，通常這是用戶正在與之交互的內容，並且應該使您接近您想要的（取決於DOM的結構）。

從jQuery：

target屬性可以是為事件注冊的元素或其后代。