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());

});

重构这个javascript代码

3 个答案: