重構此javascript代碼

Question

我有兩個點擊事件，幾乎相似，但不完全。我想知道如何最好地重構他們：

$('.remove_fields.dynamic').live('click', function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.closest(".nested-fields").remove(); 
    trigger_after_removal_callback(after_removal_trigger_node); 
    }); 

    $('.remove_fields.existing').live('click', function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    $this.prev("input[type=hidden]").val("1"); 
    $this.closest(".nested-fields").hide(); 
    trigger_after_removal_callback(after_removal_trigger_node); 
    }); 

正如你可以說有一個公平的重疊。我想知道什麼是最好/最好的方式來重構這段代碼。

Answer 1

請點擊.remove_fields點擊功能進行班級檢查。

$('.remove_fields').click(function(e) { 
    var $this = $(this); 
    var after_removal_trigger_node = $this.closest(".nested-fields").parent(); 
    trigger_removal_callback($this); 
    e.preventDefault(); 
    if($this.hasClass("dynamic") { 
     $this.closest(".nested-fields").remove(); 
    } else if($this.hasClass("existing")) { 
     $this.prev("input[type=hidden]").val("1"); 
     $this.closest(".nested-fields").hide(); 
    } 
    trigger_after_removal_callback(after_removal_trigger_node); 
}); 

Answer 2

將選擇器合併爲$('.remove_fields.dynamic, .remove_fields.existing')。

然後，測試$this是否具有類existing。如果是這樣，請運行$this.prev("input[type=hidden]").val("1");。

完成。

Answer 3

採取清理多一點：

$('.remove_fields').click(function(e) { 
    e.preventDefault(); 

    var $this = $(this); 
    var $nestedFields = $this.closest(".nested-fields"); 

    trigger_removal_callback($this); 

    if($this.hasClass("dynamic") { 
     $nestedFields.remove(); 
    } else if($this.hasClass("existing")) { 
     $this.prev("input[type=hidden]").val("1"); 
     $nestedFields.hide(); 
    } 

    trigger_after_removal_callback($nestedFields.parent()); 

});