处理多个div的点击

我有以下代码并希望编写高效的jQuery代码。处理多个div的点击

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的

来源

2012-01-25 Russ T

我认为这是一个好主意，一个处理器连接到几个事件 –

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

    //.. your function code goes here 

});

也不要忘记，事件通过DOM向上传播。所以，如果你所有的div是在一个父应该有可能只是事件处理程序绑定到父即

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

    //.. your function code goes here 

});

来源

2012-01-25 17:37:43

这是'绑定（“click''不'.bind（” onclick''。 –

@Rocket。哎呀，谢谢你不投票我失望（诚实） –

甚至更好'.on（'click''自1.7开始:) http://blog.jquery.com/2011/11/03/jquery -1-7-released/ – Fabian

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

简单。 jQuery不好吗？

来源

2012-01-25 17:38:01

Smart！和handledivclicks中的代码有什么关系吗？可以写成jquery t00 –

@ RussT：'handleDivsClicks'中唯一可以改为使用jQuery的东西就是'e.target.id'，可以写成$（e.target）.attr（'id'）'，但是'e 。目标.id'可能会更快（因为它不需要运行jQuery函数）。 –

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

来源

2012-01-25 17:39:39

如果您计划用户的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); 
    } 
});

来源

2012-01-25 17:40:51 ShankarSangoli

处理多个div的点击

回答

相关问题