Question

我有以下代码，想要编写高效的jQuery代码。

    var divs = document.getElementsByTagName("div");
for (var tmp = 0; tmp < divs.length; tmp++) {
    divs[i].onclick = handleDivClicks;
}

var divID;
var zoneID;
var y = 0;

function handleDivsClicks(e) {
    if (e.target.id == "divOne") {
        x = obj.setLength(function() {
        showMsgInDiv("Length");
    }, 2000);
    showMsgInDiv("Length Set");
    } 
    else if (e.target.id == "divTwo") {
        obj.clearLength(divID);
        showMsgInDiv("Length Cleared");
    } 
    else if (e.target.id == "divThree") {
        zoneID = obj.setZone(function() {
        showMsgInDiv("Zone Set. Ctr: " + y++);
    }, 2000);
}

所有这些都是自定义函数，我没有在这篇文章中声明它们。我只是想知道上面的代码是如何简洁有效地用jQuery编写的

Answer 1

$('div').click(handleDivsClicks);

简单。 jQuery不是很好吗？

Answer 2

$('div').bind('click', function(e){

   //.. your function code goes here

});

也不要忘记事件通过DOM向上传播。因此，如果所有div都在一个父节点下，那么应该可以将事件处理程序绑定到该父节点，即

$('#divParent').bind('click', function(e){

   //.. your function code goes here

});

Answer 3

$('div').click(function(e){
    var div_id = $(this).attr("id");

    if (div_id == "divOne") {
        x = obj.setLength(function(){
          showMsgInDiv("Length");
        }, 2000);
      showMsgInDiv("Length Set");
    }else if(div_id == "divTwo"){
        obj.clearLength(divID);
        showMsgInDiv("Length Cleared");
    }else if(div_id == "divThree"){
        zoneID = obj.setZone(function() {
        showMsgInDiv("Zone Set. Ctr: " + y++);
       }, 2000);
    }
});

Answer 4

如果您计划使用jQuery，请尝试使用id选择器来查找页面上的元素并以这种方式附加click处理程序。而不是if/else条件切换案例要好得多。

$("#divOne, #divTwo, #divThree").click(function(e){
    switch(e.target.id){
        case "divOne": 
           x = obj.setLength(function() {
               showMsgInDiv("Length");
            }, 2000);
           showMsgInDiv("Length Set");
           break;
        case "divTwo":
           obj.clearLength(e.target.id);
           showMsgInDiv("Length Cleared");
           break;
        case "divThree":
           zoneID = obj.setZone(function() {
              showMsgInDiv("Zone Set. Ctr: " + y++);
           }, 2000);
    }
});

处理多个div的点击次数

4 个答案: