Javascript 选中时，图像选择器未调用onchange

我的问题是，我的image-picker.js在通过单击图像进行选择时不会触发onchange

虽然，当实际从下拉列表中选择时，它确实会触发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>

图像选择器生成这是一种视觉效果，当选择了thumnail时，会更改“选择”下拉列表中的“选择”字段：

<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>

这在“选择”字段下，基本上显示了可用于选择的图像，当您选择它们时，它会更改“选择”字段。在表单提交时，它会像在drropdown中选择一样正确地执行所有操作。问题在于，当单击缩略图时，它不会触发实际的select is更改。我希望在从下拉列表中选择图像和单击更改选择字段的缩略图时，发生相同的更改efect触发器

我试过这个：

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>

---

使用document.getElementsByClassNamethumbnail，您可以获得一个HTMLCollection元素数组，其中包含与搜索匹配的所有html元素，您需要对每个元素进行迭代，以使用此数组子元素的每个addEventListener

例如：

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