Javascript函数，可以被很多元素使用，然后区分哪个元素点击了它

Question

例如，我有 12 个 div 标签，每个标签代表一个月。单击时，每个将显示其月份的另一个 div 并隐藏所有其他月份的 div

12 个月的 div 有共同的类别 month。每个包含该月内容的部分都有共同的 month_section，并且它们代表的月份名称不常见。

到目前为止我的 javascript 代码:

$("#January,#February,#March,#April").click(function(e)){
  $(".month").removeClass("highlight");
  $(".month_sections").removeClass("show");
  $(".month_sections").addClass("hide");
  if(this == "#January"){(this).addClass("highlight");$(".january").addClass("show");}
  else if(this == "#February"){(this).addClass("highlight");$(".february").addClass("show");}
  else if(this == "#March"){(this).addClass("highlight");$(".march").addClass("show");}
  else if(this == "#April"){(this).addClass("highlight");$(".april").addClass("show");}
});

未正确检测到 if 语句

Answer 1

在事件处理程序中，您尝试将 this 对象与字符串进行比较。

jQuery 回调上下文中的 this 是被单击的元素。如果您想比较谁被点击了，您必须使用 this.id，在第一个月的上下文中，它等于 January。所以你可以比较。

if(this.id == "January") {
    $(this).addClass("highlight");
    $(".january").addClass("show");
}

您可以采用其他一些方法来节省一些代码。

$("#January,#February,#March,#April").click(function(e) {
    var monthStr = this.id;

    $(".month").removeClass("highlight");
    $(".month_sections").removeClass("show");
    $(".month_sections").addClass("hide");

    $(this).addClass("highlight");
    $("." + monthStr.toLowerCase()).addClass("show");
});

我希望这是有用的。