0

onchange我的问题是我的 image-picker.js在单击图像时不会触发。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);
 };

错误：

事件监听器不是函数

我尝试了其他方法，但并不显着。

How can I achieve allowing a trigger when the image is chosen to do the same function as when the image is chosen from the select dropdown?

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

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

1 回答 1

0

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

例子：

[].forEach.call( document.getElementsByClassName("thumbnail"), function( element ){
    element.addEventListener("change", clickImage);
} );
于 2019-09-27T22:25:11.500 回答