При выборе изображения средство выбора не вызывает onchange - PullRequest
Новая
       128

При выборе изображения средство выбора не вызывает onchange

0 голосов
/ 28 сентября 2019

Моя проблема в том, что мой image-picker.js не вызывает onchange при выборе, щелкнув изображение.https://rvera.github.io/image-picker/

Хотя при выборе из раскрывающегося списка он вызывает переключение.

У меня есть следующее: 

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

Это поле выбора в основном показывает изображения, доступные для выбора, и когда вы выбираете их, оноизменяет поле выбора.Тонкая форма отправки, она делает все правильно, как будто выбрана в развертывании.Проблема в том, что фактическое выделение не вызывает изменения при нажатии на миниатюры.Я хотел бы, чтобы такой же эффект срабатывал при выборе изображения из выпадающего списка и при нажатии на миниатюру, которая изменяет поле выбора.

Я пробовал это: 

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>

1 Ответ

0 голосов
/ 28 сентября 2019

При использовании document.getElementsByClassName ("thumbnail") вы получаете массив элементов HTMLCollection, которые содержат все html-элементы, соответствующие вашему поиску, и вам нужно перебрать каждый из них для использования каждого addEventListener дочерних элементов этого массива.

Пример: 

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