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

我需要为几个控制图像库的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);
}

---

for（i=0；i由于代码太少，很难准确地说出您在做什么，但我建议将事件附加到父容器，监听图像上的单击，并在元素上使用
data-*
属性来控制行为。例如：

HTML


JavaScript
$（函数（）{
$（'.image gallery'）。在（'click'，'img'，函数（）{
//'this'关键字是单击的元素
var imgGalleryIndex=$（this）.closest（'.image gallery'）.data（'gallery-index'）；
//步骤库imgGalleryIndex前进1图像
画廊图片（imgGalleryIndex，1）；
//停止自动幻灯片放映
自动定时器（0）；
});
});

使用这项技术，您不需要直接向图像添加点击处理程序，它将在JS events bubble中处理您库容器的任何子容器上的点击，这是一项jQuery功能。
您能告诉我为什么这项功能被否决，以帮助我在将来正确提问吗？我可以看到这项技术对我有何作用，确实如此在我这方面需要一些重新工作，但这是我的责任。回到最初的方法/问题，是否可以动态编写函数？我上面的尝试中有什么不正确的地方？这是可行的吗？-如果你不介意的话。谢谢。@marksjack，在你的方法中，例如，你正在设置
this[fnName]
这是完全不相关的，除非你真的想在其他地方重用
这个[fnName]
（注意，实际的函数仍然是匿名的——即没有名字——）。其次，如果你的gallery有几百个图像（或者如果你动态添加/删除图像），那么你需要同步动态添加的事件。添加了一个“future”父容器上的事件，让您避免所有这些，更干净，不需要创建非通用CSS类（这是ID属性的角色，而不是CSS类名！）@marksjack，同样，使用
data-*
属性描述值的用途更为精妙，而不是
gallery0\u foo
，它不告诉……的
0
是什么，甚至不告诉任何地方是否需要它。
<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>

$(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);
  });
});