處理多個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的點擊

回答

相關問題