Question

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

我想知道使用switch语句和几个cases是否是一个好主意 - 但说实话，我甚至不知道从哪里开始或如何写下必要的代码。

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

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文件上添加任何其他内容（如果能够）。

我认为这是一个例子：

$('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

一种简单的方法是为相应的 a 标记和 t _＃元素组合设置一个公共类

HTML：

您的View屏幕截图链接应该是这样的

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

你的div应该拥有toHide类，跟随由现有的t_ #class

<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用于标识要隐藏的所有元素。 Here's小提琴

在这里使用切换/案例陈述

3 个答案: