Dropzone.js/jQuery 冲突答案

【问题标题】：Dropzone.js/jQuery conflictDropzone.js/jQuery 冲突
【发布时间】：2015-11-16 21:13:50
【问题描述】：

我有一个应用程序，它有一个 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引起的）：

【问题讨论】：

你确定'#' + src 不被评估为#？
不是 100%，我不太确定如何检查。不过，这些功能可以按需要工作——我要切换到的每张图片都有一个 ID 为this.value，如上所示。
运行 console.info('#' + src) 并查看控制台输出。
是的，正确的：#132 和类似的。
哦，该死的，我想通了。选择中的 include_blank 破坏了 jQuery。好尴尬。

标签： javascript jquery ruby-on-rails ruby-on-rails-4 dropzone.js

【解决方案1】：

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

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();
  }
}

完成。

【讨论】：