0

我正在尝试创建一个函数，当我单击一个 div 时，它会抓取 div 的第一个类，然后通过一系列 if 语句，确定要显示哪个下拉列表，我终生无法弄清楚为什么这不起作用？

每个 div 都有一个独特的类“Tab1”、“Tab2”......以及一个共享类“headerTab”

$(document).ready(function() {

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        if (clicked == "Tab1") {
            $('.dropdown1').show();
        };

        else if (clicked == "voresVisionTab") {
            $('.dropdown2').show();
        };

        else (clicked == "Tab2") {
            $('.dropdown3').show();
        };

        else (clicked == "Tab3") {
            $('.dropdown4').show();
        };
    });
});

如果我删除 if 语句，那么代码运行良好，我希望你们能在这里帮助我。

谢谢。

4

4 回答 4

3

正如其他人指出的那样，您已经用“;”打破了 if 语句。

对像您这样的简单多值情况使用开关：

$(document).ready(function() {

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        switch (clicked)
        {
           case "Tab1":
               $('.dropdown1').show();
               break;

           case "voresVisionTab":
              $('.dropdown2').show();
              break;

           case "Tab2":
              $('.dropdown3').show();
              break;

           case "Tab3":
              $('.dropdown4').show();
              break;
        }
    });
});

这更容易阅读和维护。

我的真实建议

在这种情况下，我建议您将.dropdown1选择器放在data-单击项目的属性中，然后首先不需要所有代码！

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        $($this).data('target')).show();
    });

而且您的headerTab链接上只会有data-target=".dropdown1"等。现在是两行代码而不是几十行代码，并且没有代码维护问题，因为它现在是数据驱动的。

注意：.data('target')只是一个方便的简写.attr('data-target')

于 2013-09-27T14:21:17.447 回答
1

尝试这个：

if (clicked == "Tab1") {
    $('.dropdown1').show();
} else if (clicked == "voresVisionTab") {
    $('.dropdown2').show();
} else if (clicked == "Tab2") {
    $('.dropdown3').show();
} else if (clicked == "Tab3") {
   $('.dropdown4').show();
};

你有;你的 if 和 else 之后，需要 else if ，而你只有 else 。

于 2013-09-27T13:33:37.763 回答
0

你不能写两个else。其他没有条件。

$('.dropdown').hide();

    $(".headerTab").click(function() {
        $(".dropdown").hide();
        var clicked = $(this).attr("class").split(" ")[0];

        if (clicked == "Tab1") {
            $('.dropdown1').show();
        };

        else if (clicked == "voresVisionTab") {
            $('.dropdown2').show();
        };

        else if(clicked == "Tab2") {
              ^
            $('.dropdown3').show();
        };

        else if(clicked == "Tab3") {
              ^
            $('.dropdown4').show();
        };
    });
});
于 2013-09-27T13:36:07.513 回答
0

首先，您拆分包含类的字符串，使其成为一个数组。因此，如果您的班级不是班级中的第一个。您的 if 语句不会比较正确的类。其次，您在 if-case 上出现语法错误。

尝试以下操作：

$('.headerTab').on('click', function() {
    var $this = $(this); // cache $(this)
    $(".dropdown").hide();

    if ($this.hasClass('Tab1')) {
        $('.dropdown1').show();
    } else if ($this.hasClass('voresVisionTab')) {
        $('.dropdown2').show();
    } else if ($this.hasClass('Tab2')) {
        $('.dropdown3').show();
    } else ($this.hasClass('Tab3')) {
        $('.dropdown4').show();
    }
});

编辑：我会给每个 headerTab 一个唯一的 ID（或数据属性），然后检查单击的是哪个，并将其与 switch-case 而不是 if 进行比较。

于 2013-09-27T13:36:53.257 回答