Javascript 将多个jQuery on click函数重构为一个函数

创建一个动态函数的最佳方法是什么，这样我就不会经常编写多个类似的函数了

$("#litigation-click").click(function() {
    $(".textbox-analysis").hide()
    $("#litigation-box").fadeIn("slow",function() {});
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");

    return false;
});

$("#goingconcern-click").click(function(){
    $(".textbox-analysis").hide()
    $("#goingconcern-box").fadeIn("slow",function(){});
    $("html, body").animate({scrollTop: $(document).height()},"slow");

    return false;
});

$("#unquoted-click").click(function() {
    $(".textbox-analysis").hide()
    $("#unquoted-box").fadeIn("slow",function(){});
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");

    return false;
});

您可以使用&

事件

对象来获取目标元素

  $("#litigation-click, #unquoted-click, #goingconcern-click").click(function(event) {
  $(".textbox-analysis").hide();
  var _getId = event.target.id; // will give target element
  $("#"+_getId).fadeIn("slow",function() {
  });
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

---

您可以对多个选择器使用逗号分隔符，然后拆分单击

id

，以获取第一部分并使用它生成框

id

：

$("#unquoted-click, #goingconcern-click, #unquoted-click").click(function() {
    $(".textbox-analysis").hide();

    $("#" + this.id.split('-')[0] + "-box").fadeIn("slow",function(){});
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");

    return false;
});

如果你可以填充你的HTML代码，我们可以找到另一种方法来相对地获得这个框

---

希望这有帮助。

您可以编写一个带有参数的函数。例如

function Clicked(elClicked) {
  $(".textbox-analysis").hide()
  $(elClicked).fadeIn("slow",function() {
  });
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
}

然后在click事件中使用已单击的元素id参数调用该函数

$("#litigation-click, #goingconcern-click, #unquoted-click").click(function() {
     Clicked("#" + $(this).attr('id'));
});

---

$（this）.attr（'id'）

获取所单击元素的id。

请添加HTML示例。具体来说，我们需要了解

#X-click

元素与

#X-box

元素之间的关系？别管它了。重构是否使阅读变得更好。我对此表示怀疑。是否有大量的重用，不是真的。假设他在这里有三个以上的听众，并且刚刚发布了一个示例。即使如此，重新分解可能也会变得“冗长”。@Liam一点也不。不必对每个

X-click

元素重复相同的click处理程序N次，它可以很容易地更改，这样一个处理程序就可以处理无限多的元素。我们需要知道的是如何遍历OP用HTML创建的DOM。但是，您如何知道是否要选择

#诉讼框

、

#无引号框

或

#goingconcern框

？当您问我如何知道事件目标时，您是对的。但是，如果您检查单击处理程序，则所有单击处理程序都在执行相同的工作。如果是这样的话，他应该使用普通类。我完全同意。然而，这只是半个答案。@Rorymcrossan很抱歉，我遗漏了他的代码中的一行。@Rorymcrossan感谢您指出。我已经编辑了答案