在这里使用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;
});

Answer 2

您可以将数据目标添加到屏幕截图类

<a class="screenshots_2" data-target="t_2">...</a>

然后，您可以执行以下操作：

$('a[class^="screenshots_"]').on('click', function () {
  $('[class^="t_"]').hide(); // You could also add a common .thumb class to target more efficiently
  $('#main-overlay, .' + $(this).data('target')).show();
});'

或者，您可能会像这种小提琴一样更通用：

https://jsfiddle.net/scottux/0rmgzh7v/

$('.screenshot').on('click', function () {
  var idx = $(this).attr('class').match(/_(\d)/)[1];
  $('.thumb').hide();
  $('.t_'+idx).show();
});

如果您不想编辑HTML https://jsfiddle.net/scottux/ys4edLvf/7/

// bind to all anchors with a class that begins with screenshots_
$('a[class^="screenshots_"]').on('click', function() { 
  // pull the number from this element's class name
  var idx = $(this).attr('class').match(/_(\d)/)[1];
  // hide anything where the class begins with t_
  $('[class^="t_"]').hide();
  // show the corresponding t_ to the number we pulled off this screenshot element
  $('#main-overlay, .t_'+idx).show(); 
  return false;
});

Answer 3

一个简单的方法是将有一个共同的类相应的标签和T_＃元素组合

HTML：

您用于查看屏幕截图的链接应类似于以下内容

<a class="screenshots t_22" href="#" title="View Screenshots"></a>

并且您的div应该具有toHide类， 然后是现有的t_＃类

<div class="toHide t_22">
    ...
</div>

JS：

$('a.screenshots').click(function() {
    $(".toHide ").hide();
    var clickedClass = this.classList[1];
    $('#main-overlay, .'+ clickedClass).show();

    return false;
});

element.classList返回在标签中出现的类的数组。 因此，数组的第一个索引将返回字符串t_＃

.toHide用于标识所有要隐藏的元素。 这是一个小提琴