哪一種寫作內容人羣的方法更好？

Question

比方說，我有10個具有唯一ID的div。當我點擊每個元素時，我希望顯示一個覆蓋div，並在其中根據原始div的ID填充內容。

是更好地做：

$('#inventory > div').find('i.icon-plus').on('click', function(){ 
    $('#add-item').slideDown(100); 
    if ($(this).parent('div').attr('id') == '#id1') { 
     // load unique template 
     // or 
     // create form content here 
    } 
    else if ($(this).parent('div').attr('id') == '#id2') { 
     // load other unique template 
     // or 
     // create other form content here 
    } 

    ... 

    else if ($(this).parent('div').attr('id') == '#id10') { 
     // load other unique template 
     // or 
     // create other form content here 
    } 
}); 

或者：

$('#inventory > div#id1').find('i.icon-plus').on('click', function(){ 
    $('#add-item').slideDown(100); 
    // load unique template 
    // or 
    // create form content here 
}); 
$('#inventory > div#id2').find('i.icon-plus').on('click', function(){ 
    $('#add-item').slideDown(100); 
    // load unique template 
    // or 
    // create form content here 
}); 

... 

$('#inventory > div#id10').find('i.icon-plus').on('click', function(){ 
    $('#add-item').slideDown(100); 
    // load other unique template 
    // or 
    // create other form content here 
}); 

？

基本上我問的是：只有一個事件處理程序有一大堆if/else語句或一大堆事件處理程序沒有if/else語句，還是它不甚重要？

Answer 1

我建議你使用on將你的事件處理程序委派給父項，這樣就避免了jQuery必須爲每個i.icon-plus附加處理程序。

然後使用帶有ID的處理程序的映射作爲具有運行其相應代碼的函數的鍵。這樣，你不會附加很多if語句。

每個「案例」可能包含重複的代碼，如果我們知道的話，代碼可以進一步優化。但是，因爲我們不知道是什麼的映射功能，每塊做，這裏的通用代碼應該服務於同一目的：

//add handles here, with id as the key and a 
//corresponding function that does what its supposed to do 
var handles = { 
    '#id1' : function(){/*do something*/}, 
    '#id2' : function(){/*do something*/}, 
    ... 
} 

//let's cache this one as well 
var addItem = $('#add-item'); 

$('#inventory > div').on('click','i.icon-plus', function(e){ 

    //get the corresponding handler 
    var handler = handles[$(this).parent('div').attr('id')]; 

    //return if the handler isn't defined for this id 
    if(!handler) return; 

    //otherwise, execute. the context and arguments are passed on 
    addItem.slideDown(100); 
    handler.apply(this,arguments); 
}); 

這可以進一步優化如果股利由#inventory > div引用，這是我們的delegate target，與$(this).parent('div')相同。如果是這樣，可以更換，以減少函數調用：

$(this).parent('div').attr('id') 

//can be replaced by 

$(e.delegateTarget).attr('id') 

Answer 2

嘗試這種情況：

$("#inventory").children("div").on("click", "i.icon-plus", function (e) { 
    console.log(e.delegateTarget.id); 
    // Do your logic based on e.delegateTarget.id 
}); 

DEMO：http://jsfiddle.net/7kyGP/

此結合一個事件給每個 「父」 的（目標）<div>元件。您在代碼中使用.parent()，但您使用.find()獲取<i>。這有點矛盾，因爲.find()得到後代......因此.parent()不一定是你認爲它是如果<i>嵌套。通過這段代碼，<i>元素不必是直接的孩子 - 他們可以是後代。

的處理函數中，this是指特定<i>點擊的元素，而e.delegateTarget是指該事件實際上是必然的元素 - 兒童<div> S的#inventory。當然，您可以使用jQuery來操作$(e.delegateTarget)的目標。

Answer 3

我懷疑有一個更通用的方法在這裏 - 如果你可以添加你需要的屬性，讓您加載獨特的模板或創建表單內容的數據那麼不需要大量的if語句或多個事件處理程序。

HTML

<div id="inventory"> 
    <div id="id1" data-template-url="subform1.htm"> 
     ... some content 
     <i class="icon-plus"></i> 
    <div> 
    <div id="id2" data-template-url="subform2.htm"> 
     ... some content 
     <i class="icon-plus"></i> 
    <div> 
    <div id="id3" data-panel-id="panel3"> 
     ... some content 
     <i class="icon-plus"></i> 
    <div> 
</div> 

<div id="panel3" class="hide-until-required"> 
... panel content 
</div> 

JAVASCRIPT

$('#inventory > div').find('i.icon-plus').on('click', function() { 
    $('#add-item').slideDown(100); 

    var templateUrl = $(this).parent('div').attr('data-panel-id'); 
    // or 
    var panelId = $(this).parent('div').attr('data-template-url'); 

    // do something with template or panel data 
});