组合类似长jQuery函数的最有效和最短的方法

我有以下3个类似的独立功能：

$("a").click(function () {
        $(this).slideUp();

/* additional long identical code */
});

$("b").click(function () {
        $(this).css("color", "blue");
/* additional long identical code */
});

$("c").click(function () {
        $(this).hide();
/* additional long identical code */
});

它们都有额外的长代码。 我想知道是否有其他更简短、更有效的方法将它们结合起来。这就是我所做的：

$("a, b, c").click(function () {
    if ($(this).is("a")) {
        $(this).slideUp();
    }

    else if ($(this).is("b")) {
        $(this).css("color", "blue");
    }

    else if ($(this).is("c")) {
        $(this).hide();
    }
/* additional long identical code */
});

小提琴：你可以试试

$("a, b, c").click(function () {
    $e = $(this);
    ($e.is("a")?$e.slideUp():$e.is("b")?$e.css("color", "blue"):$e.hide());
});

---

但是我的方法是缩短代码并不是一个好的实践，你应该保持模块化，在可读性和大小之间建立一个折衷。

我会按照用户mplungjan的建议，但使用Javascript切换方法

大概是这样的：

$(".classname").on("click",function() {
    var id = $(this).attr("id");

    switch (id) {
      case "a":
        console.log("a clicked");
        break;
      case "b":
        console.log("b clicked");
        break;

      ...

      default:
        console.log(id + " clicked");
    }

}

---

开关：

给他们一个类并使用

$（“.classname”）。在（“单击”，函数（）{if（this.id==“a”）……<代码> >使用类而不是内联CSS到<代码> b>代码>元素，也可以使用<代码>开关>代码>而不是<代码> >如果是“<代码>”。但是，在代码的第二部分中出现的方式似乎很好。考虑将单击处理程序定义与已拥有的定义分开，只需为长的相同代码做函数调用。at通常是一种更易于管理的方法，用于处理事件，然后执行相同的代码