Question

我使用jquery（事件委托）将单击事件绑定到一个大容器。

我在该容器中有许多可点击的不同项目。

我正在处理的问题是，如果我有20个可点击的项目，我需要在点击处理程序的容器中执行if else块x 20。有没有办法让这个更干净？ E.g：

attachClickEvent:function(){
    $(".container").click($.proxy(this.handleOnClick,this));
},
handleOnClick:function(event){
     var $target = $(event.target);
     if($target.closest(".widget1").length >0){
         //handle widget 1 interaction
     }else if($target.closest(".widget2").length >0){
         //handle widget 2 interaction
     }else if($target.closest(".widget3").length >0){
         //handle widget 3 interaction
     }else if($target.closest(".widget4").length >0){
         //handle widget 4 interaction
     }else if($target.closest(".widget5").length >0){
         //handle widget 5 interaction
     }
}

等

Answer 1

首先想到的是使用循环：

var handlers = {
  "widget1": function(event, candidate){},
  "widget2": function(event, candidate){}
}

$.each(handlers, function(cssClass,handler){
  var sel = '.'+cssClass;
  var candidate = target.closest(sel);
  if(candidate.length > 0) {
    handler(event, candidate);
    break;
  }
});

Answer 2

使用函数创建对象

这个游戏有点晚了，但你应该考虑像这样组织你的代码。

如果您的小部件有20个独特的操作，那么您将使用所有代码。尝试通过创建函数来重用公共代码。建立一个这样的结构：

var actions = {
    'widget1' : function(event) {
        // handle widget 1 interaction
    },
    'widget2' : function(event) {
        // handle widget 2 interaction
    },
    'widget3' : function(event) {
        // handle widget 3 interaction
    },
    call : function(event) {
        var prefix = "widget",
            widget = $(event.target).closest('[class^="'+prefix+'"]'),
            classN;
        if(widget.length) {
            classN = widget.attr('class').replace(new RegExp('.*('+prefix+'\\d*).*$'), '$1');
            if(classN in this) {
                this[classN](event);
            }
        }
    }
};

简化执行

然后，从您的点击处理程序中，只需调用此函数：

handleOnClick : function(event) {
    actions.call(event)
}

Answer 3

jQuery提供开箱即用的功能：

$('.container').on('click', '.widget1', function() {
    // handle widget 1 interaction
});

$('.container').on('click', '.widget2', function() {
    // handle widget 2 interaction
});

我最近编写了一个库来解压缩，如果你没有使用jQuery。它被称为鳄鱼。您可以在以下位置查看示例/文档： http://craig.is/riding/gators

您可以执行类似

的操作

Gator(container_element).on('click', '.widget1', function() {
    // handle widget 1 interaction
});

Gator(container_element).on('click', '.widget2', function() {
    // handle widget 2 interaction
});

jQuery和Gator都只将单击事件绑定到容器元素，并处理内部调度事件。

Answer 4

HTML

<div class="container">
 <div id="cont1"></div>
 <div id="cont2"></div>
 <div id="cont3"></div>
 <div id="cont4"></div>
 <div id="cont5"></div>
 <div id="cont6"></div>
.
.
.

</div>

的jQuery

$(".container").find("div").click(function(){
id = $(this).attr("id");
if(id=="cont1"){
...
}
else if(id=="cont2"){
..
}
..
else{
..
}
});

Answer 5

这可能是您正在寻找的东西。有很多不同的方法可以做到这一点。

<div id="widgetcontainer">
    <div id="widget1">A</div>
    <div id="widget2">B</div>
    <div id="widget3">C</div>
    <div id="widget4">D</div>
    <div id="widget5">E</div>  
</div>

这是JS

function someAction() {
    alert("Hey");
}


$(function() {
    var wc = $("#widgetcontainer div");
    for (var i = 0; i < wc.length; i++) {
        $(wc[i]).click(function() {
            someAction();
        });
    }
});

Answer 6

如何使用delegate？

$(".container").
    delegate(".widget1", "click", widget_1_handler).
    delegate(".widget2", "click", widget_2_handler)
;

JavaScript事件委托代码组织

6 个答案: