重构此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()); 

});