Question

我的问题是，单击图像选择我的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>

图像选择器产生此效果（这是视觉效果，当选择缩略图时，将在选择下拉列表中更改选择字段）：

<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中选择的那样正确执行所有操作。问题在于，单击缩略图时，它不会触发实际的选择更改。我想从下拉列表中选择图像并单击更改选择字段的缩略图时也会发生同样的更改效果触发器。

我尝试过：

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>

Answer 1

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

示例：

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

图像选取器在被选中时未调用onchange

1 个答案: