是否可以缩短我的 if/else 语句？答案

【问题标题】：Is it possible to shorten my if/else statement?是否可以缩短我的 if/else 语句？
【发布时间】：2016-07-28 03:44:17
【问题描述】：

if/else 语句和其他类似代码的问题

您好，目前我正在使用此代码调用 if/else 语句，以便在单击不同表时添加和/或删除“.hide”类。这段代码运行良好，一点问题都没有。

示例 1

$(document).ready(function() {
    $('#Year_Table').click(function() {
        if ($('#Month_Table').hasClass("hide")) {
            $('#Month_Table').removeClass('hide');
        } else {
            $('#Month_Table').addClass('hide');
            $('#Day_Table').addClass('hide');
        }
    });
});

但我想知道的是，是否有办法让代码更短？但结果相同。添加或删除该类。

几天前我有另一个问题，有人将我的 if/else 语句 缩短为下面的代码。谢谢

示例 2

$( document ).ready(function(){
    var games_month  = 0;
    var month_games  = "Games";

    $("#Games_Month").html(games_month);

    $('#January').click(function(){ 
        $('#Games_Month').html(function(_, html) {
        return html === month_games ? games_month : month_games;
     });
});

缩短的代码也可以完美运行，但给了我几个问号。现在，我想知道的是：

1：为我缩短了这种类型的代码是什么？我的意思是，它叫什么？

有人告诉我这可能是一个回调函数。

2：与标准 if/else 语句和缩短代码有何不同？

是一样的，只是清理了吗？还是有什么重要的区别？

3：缩短代码的不同部分是什么意思？他们是做什么的？

对我来说，这似乎是另一种 if/else 语句？

4：有没有办法用类而不是变量来制作这样的代码？

我想添加或删除类“.hide”而不是更改变量，是否可以在此函数中添加和删除多个类？

5：有没有其他方法来编写 if/else 语句或给出相同结果的代码？

我在使用 javascript 和 jQuery 方面都很陌生，但我正在尝试尽可能多地学习。感谢所有帮助我理解这一切，一切都将帮助我进一步了解我的编码知识。

非常感谢。

【问题讨论】：

您确定您的示例 1 完全有效吗？你永远不会取消隐藏#Day_Table。
是的，我刚刚排除了完整的代码，所以它不会占用太多空间，#Month_Table 和#Day_Table 是#Year_Table 的嵌套表当然你不能看到没有html给它。
只是你的代码越对称，越容易缩短。

标签： javascript jquery if-statement show-hide

【解决方案1】：

$(document).ready(function() {
  $('#Year_Table').click(function() {
    $('#Month_Table').toggleClass("hide");
    $('#Day_Table').toggleClass('hide');

  });
});

.hide {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='Year_Table'>click me</span>

<span id='Month_Table'>Month_Table</span>

<span id='Day_Table'>Day_Table</span>

使用.toggleClass()

【讨论】：

【解决方案2】：

您可以像这样使用 toggleClass 缩短示例 1 代码：

$(document).ready(function() {
    $('#Year_Table').click(function() {
        $('#Month_Table').toggleClass('hide');
        $('#Day_Table').toggleClass('hide');
    });
});

在您的示例 2 中，您使用的是 ternary operator 而不是采用三个操作数的 if/else 语句。

condition ? expr1 : expr2

【讨论】：