选择时图像选择器未调用 onchange答案

【问题标题】：Image Picker isn't calling onchange when selected选择时图像选择器未调用 onchange
【发布时间】：2019-09-27 22:20:16
【问题描述】：

我的问题是我的 image-picker.js 在通过单击图像选择时不会触发onchange。 https://rvera.github.io/image-picker/

虽然，当实际从下拉列表中选择时，它确实会触发 onchange。

我有以下几点：

<%= ff.select :image_file_id, options_for_select(@image_files.map { |image| [image.id, {'data-img-src'=>image.image_file_url(:thumb)}]}), {:include_blank => 'Choose None'}, class: "image-picker", id: "tshirt-design" %>

<script>

var images = <%= images_2.to_h.to_json.html_safe %> // this is an array from ruby
document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
   updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
}, false);

//image-picker
var imgSetting<%= "#{ff.object.print_location.id}" %> = {
  hide_select: false,
  show_label: true,
};
$(document).ready(function () {
  $(".image-picker-<%= "#{ff.object.print_location.id}" %>").imagepicker(imgSetting<%= "#{ff.object.print_location.id}" %>);
});

</script>

Image picker produces this (this is a visual and when the thumnail is selected, is changes the select field in the select dropdown):

<ul class="thumbnails image_picker_selector">
  <li>
    <div class="thumbnail selected">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>
  ....
</ul>

这是在选择字段下基本上显示可供选择的图像，当您选择它们时，它会更改选择字段。提交表单时，它会正确执行所有操作，就像在下拉菜单中选择一样。问题是它没有触发实际的选择是单击缩略图时发生的变化。我希望在从下拉列表中选择图像以及单击更改选择字段的缩略图时发生相同的更改效果触发器。

我试过了：

document.getElementsByClassName("thumbnail").addEventListener("select", clickImage);

function clickImage() {
  document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
  updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
  }, false);
};

还有这个：

document.getElementsByClassName("thumbnail").addEventListener("change", clickImage);

function clickImage() {
  document.getElementById("tshirt-design-<%= "#{ff.object.print_location.id}" %>").addEventListener("change", function(){
  updateTshirtImage<%= "#{ff.object.print_location.id}" %>(images[this.value]);
  }, false);
 };

错误：

事件监听器不是函数

我尝试了其他方法，但效果不佳。

如何实现在选择图像时允许触发器执行与从选择下拉列表中选择图像时相同的功能？

我需要在以下情况下发生的相同事件：

document.getElementById("tshirt-design-<%= "#{ff.obje...

发生在：

 <li>
    <div class="thumbnail">
      <img class="image_picker_image" src="https://example.s3.amazonaws.com/example">     
      <p>1</p>
    </div>
  </li>

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby imagepicker

【解决方案1】：

使用 document.getElementsByClassName("thumbnail") 您将获得一个 HTMLCollection 元素数组，其中包含与您的搜索匹配的所有 html 元素，您需要对每个元素进行迭代以使用该数组的子元素的每个 addEventListener。

例子：

[].forEach.call( document.getElementsByClassName("thumbnail"), function( element ){
    element.addEventListener("change", clickImage);
} );

【讨论】：