javascript - 在这里使用 switch/case 语句是否可行

Question

我正在修改我的 javascript 文件并消除任何不必要的东西。现在，它看起来非常可怕(或者至少我认为如此)。

我想知道在多个 cases 中使用 switch 语句是否是一个好主意 - 但说实话，我什至不知道在哪里开始或如何编写必要的代码。

我知道它的基本语法，但不知道如何在这种情况下应用它。

switch () {
    case '':
        // code here
        break;
    case '':
        // code here
        break;
    default '':
        // code here
        break;
}

或者用完全不同的方式编写会更可行吗？

无论如何，这就是我的 js 文件中当前的内容...

JS:

$('a.screenshots_1').click(function() {
    $('.t_1, .t_2, .t_3, .t_4, .t_5, .t_6, .t_7, .t_8, .t_9, .t_10, .t_11, .t_12, .t_13, .t_14, .t_15, .t_16, .t_17, .t_18, .t_19, .t_20, .t_21, .t_22, .t_23, .t_24').hide();
    $('#main-overlay, .t_1').show();

    return false;
});

我在这个文件中总共有 24 个这样的内容...并且感觉它可以大大缩短...我只是不知道如何去做。

$('a.screenshots_2').click(function() {
    $('.t_1, .t_2, .t_3, .t_4, .t_5, .t_6, .t_7, .t_8, .t_9, .t_10, .t_11, .t_12, .t_13, .t_14, .t_15, .t_16, .t_17, .t_18, .t_19, .t_20, .t_21, .t_22, .t_23, .t_24').hide();
    $('#main-overlay, .t_2').show();

    return false;
});

如您所见，a.screenshots_# 和 $('#main-overlay, .t_#).show(); 分别发生变化 - 其中 # 是一个数字(从 1 到 24 列出)

非常感谢任何反馈。

更新:

jsFiddle按要求。

第二次更新:

我在这里想做的就是简化我的 js 文件。我总共有 24 个实例(或案例)，我想看看是否可以将其减少到 1 个实例(或案例)，但适用于所有 24 个……希望这是有意义的。简而言之，我试图从我所拥有的(如果可能的话)编写更清晰的代码，并且不在我的 html/css 文件上添加任何额外的(如果可以的话)。

我认为这是 1 个实例:

$('a.screenshots_1').click(function() {
        $('.t_1, .t_2, .t_3, .t_4, .t_5, .t_6, .t_7, .t_8, .t_9, .t_10, .t_11, .t_12, .t_13, .t_14, .t_15, .t_16, .t_17, .t_18, .t_19, .t_20, .t_21, .t_22, .t_23, .t_24').hide();
        $('#main-overlay, .t_1').show();

        return false;
    });

这是第二个实例:

$('a.screenshots_2').click(function() {
        $('.t_1, .t_2, .t_3, .t_4, .t_5, .t_6, .t_7, .t_8, .t_9, .t_10, .t_11, .t_12, .t_13, .t_14, .t_15, .t_16, .t_17, .t_18, .t_19, .t_20, .t_21, .t_22, .t_23, .t_24').hide();
        $('#main-overlay, .t_2').show();

        return false;
    });

等等...

Answer 1

您的标签 $('.t_1, .t_2, .t_3, .t_4, .t_5, .t_6) 等可以具有相同的类(比如说 .toBeHidden )和您的 $('a.screenshots_1')、$('a.screenshots_2')、$('a.screenshots_3')等。还有一个相同的类(比如说 .screenshot )，这样你就可以像这样重写你的代码

$('screenshot').click(function() {
    $('.toBeHidden').hide();
    $('#main-overlay, .t_2').show();
    return false;
});