Question

我正在尝试创建一个函数，当我点击一个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语句，那么代码运行正常，我希望你们能在这里帮助我。

感谢。

Answer 1

正如其他人所指出的，你用“;”s打破了你的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')

的便捷简写

Answer 2

试试这个：

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

在你的if和其他人之后你有;，而你只有其他地方需要其他人。

Answer 3

你不能写两个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();
        };
    });
});

Answer 4

首先，拆分包含类的字符串，使其成为一个数组。所以，如果你的班级不是班级的第一班。你的if语句不会比较正确的类。其次，if-cases上的语法错误。

尝试以下方法：

$('.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进行比较。

如果函数内的语句由于某种原因不会运行

4 个答案:

我的真实世界的建议