Question

我需要为控制图片库的几个HTML按钮创建点击处理程序。 HTML中的每个按钮都会收到一个类，该类指示要执行的功能 - 例如前进或后退。我还需要在同一个网页上为多个图库创建这些处理程序。

这是“硬编码”版本。是否可以创建一个动态函数来复制下面这个工作示例？

$('.gallery0_stepForward').on('click', function() {
    gallery_changeImage(0, 1);    // step gallery 0 forward 1 image
    gallery_stopAutoTimer(0);     // stop the automatic slide show
});

我尝试过这样的事情：

for (i=0;i<5; i++){   // 5 galleries in this example

    var target = ".gallery" + i + "_stepForward";
    var fnName = "stepForward" + i;

    function setFunc ( fnName ) {
        this[ fnName ] = function() {
                console.log('hello ' + fnName);
                gallery_changeImage(i, 1);
        gallery_stopAutoTimer(i);
           };
    }

    $(target).on('click', fnName);
}

必须保留将类附加到HTML的系统。必须保留函数“gallery_changeImage（val，val）”，因为该函数中有多行代码。谢谢。

Answer 1

很难准确地说出你在做什么，只需要很少的代码，但我建议将一个事件附加到父容器，听取你的图像点击，并在元素上使用data-*属性控制行为。例如：

HTML

<div class="image-gallery" data-gallery-index="0">
  <img src="...">
  <img src="...">
  <!-- more images -->
</div>
<div class="image-gallery" data-gallery-index="1">
  <img src="...">
  <img src="...">
  <!-- more images -->
</div>

的JavaScript

$(function () {
  $('.image-gallery').on('click', 'img', function () {
    // the `this` keyword is the clicked <img> element
    var imgGalleryIndex = $(this).closest('.image-gallery').data('gallery-index');

    // step gallery imgGalleryIndex forward 1 image
    gallery_changeImage(imgGalleryIndex, 1);    

    // stop the automatic slide show
    gallery_stopAutoTimer(0);
  });
});

使用这种技术，您不需要直接向图像添加点击处理程序，它将处理点击您的图库容器的任何子项作为JS事件泡沫，这是一个jQuery功能。

是否可以动态创建这些jQuery点击处理程序？

1 个答案:

HTML

的JavaScript