Question

所以我有一些代码（jQuery）：

$(document).on('tap', '#category1-btn', {category : "category1"}, onlineListGen);
$(document).on('tap', '#category2-btn', {category : "category2"}, onlineListGen);
$(document).on('tap', '#category3-btn', {category : "category3"}, onlineListGen);
$(document).on('tap', '#category4-btn', {category : "category4"}, onlineListGen);
$(document).on('tap', '#category5-btn', {category : "category5"}, onlineListGen);
$(document).on('tap', '#category6-btn', {category : "category6"}, onlineListGen);

这似乎违反了DNRY规则。而且，类别的数量取决于读取的JSON文件，并且将来，我想根据JSON文件内容动态创建categoryN-btn（s）。 AS是否有办法通过动态生成事件监听器或以某种方式使用类来完成上述操作？

感谢您的帮助

Answer 1

使用for循环：

var count = N; //N is the count of button from JSON

for(var i=0;i<count;i++){
     $(document).on('tap', '#category'+i+'-btn', {category : "category"+i}, onlineListGen);
}

希望这有帮助。

Answer 2

你可以将其中一个包装在一个函数中，只需在任何时候调用它。

var tapper = (function(){
  var c = 0;
  return function(){
    $(document).on('tap', '#category'+(++c)+'-btn', {category : 'category'+c}, onlineListGen);
    return $;
  }
})();
tapper(); tapper(); // call whenever and wherever

Answer 3

在我发布这里之后，我一直想到这个想法。

我只是将其添加到我的事件处理函数

function myFunction(){
  var category = this.id.slice(0,-4); //the slice removes the '-btn' from the ID
  myData = JSONData[category]
  //some more code that uses myData
}

并使用了事件监听器

$(document).on('tap', '.category-btn', myFunction);

按钮的html是

<a href="#category-1" class="category-btn" id= "category1-btn">category</a>

Answer 4

假设您知道这些类别是什么元素类型，您可以添加一个通用的处理程序（对于具有button ID的元素假设#categoryX-btn - 调整以匹配您的标记）：

$(document).on('tap', 'button', function(ev) {
    var match = /^(category[0-9]+)-btn$/.exec(this.id);
    if (match) {
        ev.data = { category: match[1] };
        return onlineListGen.call(this, ev);
    }
    return true;
});

未经测试，但你应该明白......

如何动态添加事件侦听器

4 个答案: