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

使用e.target，因为它引用了点击的元素。

请注意，这与使用$(this)不同。在这个问题的答案中阅读更多相关内容：Difference between $(this) and event.target?

Answer 2

在事件处理程序中，您尝试将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");
});

我希望这很有用。

Answer 3

使用以下作为if语句：

if ($(this).attr('id') === 'January')

如果您每个月都需要特别的东西，也可以使用switch语句：

switch ($(this).attr('id'))
{
   case 'January':
   case 'February':
...
}

祝你好运！

Answer 4

您的代码中有几处错误

您将'this'与元素的id进行比较，这是javascript对象而不是元素的id

addClass是一个jQuery方法，你必须将它称为'$（this）'

试试这个

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

注意：如果您使用e.target.id或$（this）.attr（'id'）而不是this.id，则其中任何一个都可以使用

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

4 个答案: