如何以三元方式使用 insertAfter 和 insertBefore 代码转换 if 块？答案

【问题标题】：how can I convert the if block with insertAfter and insertBefore code in ternary way?如何以三元方式使用 insertAfter 和 insertBefore 代码转换 if 块？
【发布时间】：2014-05-29 18:27:24
【问题描述】：

如何将下面的代码进行三元转换？

if(epaper.othermakemodel.is(':checked')){
$("#dcolor").insertAfter("#lmodel");
}else{
$("#dcolor").insertBefore("#otherlabeldiv");
}

【问题讨论】：

你为什么要这样做？
一行而不是四行
好吧，但是可读性呢？ 1行并不意味着它会更好。在你的情况下，这将是最糟糕的

标签： javascript jquery ternary-operator

【解决方案1】：

这可行：

var c = epaper.othermakemodel.is(':checked');
$("#dcolor")["insert" + (c ? "After" : "Before")](c ? "#lmodel" : "#otherlabeldiv");

甚至是单线：

$("#dcolor")["insert" + (epaper.othermakemodel.is(':checked') ? "After" : "Before")](epaper.othermakemodel.is(':checked') ? "#lmodel" : "#otherlabeldiv");

但是，这只是为了使用运算符而使用三元运算符。

保持代码简短，但更重要的是，保持代码可读：

var element = $("#dcolor");
if(epaper.othermakemodel.is(':checked')){
    element.insertAfter("#lmodel");
}else{
    element.insertBefore("#otherlabeldiv");
}

如果您必须在一年后维护您的代码，这将使所有相关人员免于头疼。

【讨论】：

【解决方案2】：

当每行只有一个表达式时，您可以进行此转换

condition ?     // if (condition)
    expr_true   //     expr_true;
:               // else
    expr_false; //     expr_false;

所以你的会变成

epaper.othermakemodel.is(':checked') ?
    $("#dcolor").insertAfter("#lmodel")
:
    $("#dcolor").insertBefore("#otherlabeldiv");

不过，这对你的情况并没有什么帮助。

请记住，大部分空格在 JavaScript 中没有任何意义，因此您甚至可以将其写在一行中，与 if..else。

【讨论】：