Question

创建一个动态函数的最佳方法是什么，所以我不是经常编写多个类似的函数？

$("#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;
});

Answer 1

您可以为多个选择器使用逗号分隔符，然后拆分点击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代码，我们可以找到另一种方法来相对使用该框。

希望这有帮助。

Answer 2

您可以使用参数编写一个函数。 E.g。

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。

Answer 3

您可以使用jQuery Multiple Selector (“selector1, selector2, selectorN”)＆amp; event对象获取目标元素

  $("#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;
});

将单击函数上的多个jQuery重构为一个函数

3 个答案: