Dropzone.js/jQuery 冲突

Question

我有一个应用程序有一个 Dropzone.js 区域（实际上在一个页面上有两个）以及一些自定义 jQuery。自定义 jQuery（下图）工作正常。

function changeImage() {
  var self = $(this),
      src = this.value,
      thumbs = self.closest('.form-group').siblings('.selector_thumbnails');

 thumbs
     .find('img')
     .hide()
     .filter('#' + src)
     .show();
}

$('.thumbnail_selector')
    .change(changeImage)
    .trigger('change');

对应的HTML如下：

<div class='row form-group'>
  <div class='col-sm-2'></div>
  <div class='col-sm-4'>
    <%= f.input :cover_id, collection: @covers.reverse, as: :select, include_blank: true, input_html: { class: 'thumbnail_selector' } %>
    <div class='selector_thumbnails'>
      <% @covers.each do |cover| %>
        <%= image_tag(cover.cover(:cropped), id: cover.id, class: 'thumbnail') %>
      <% end %>
    </div>
  </div>
</div>

尽管如此，Dropzone 无法正常工作。如果我删除该代码，Dropzone 工作正常。我错过了什么？

这是我的控制台（这是一个 Dropzone 错误，似乎是由上述 JS 引起的）：

Answer 1

问题是 jQuery 试图读取 include_blank: true 设置的 .value。所以，解决方案：

function changeImage() {
  var self = $(this),
      src = this.value,
      thumbs = self.closest('.form-group').siblings('.selector_thumbnails');

  if (src) {
    thumbs.find('img').hide().filter('#' + src).show();
  } else {
    thumbs.find('img').hide();
  }
}

完成。

Dropzone.js/jQuery 冲突

Dropzone.js/jQuery conflict

javascript

jquery

ruby-on-rails

ruby-on-rails-4

dropzone.js