三元运算符中的 if/else 冗余代码

Question

这段代码工作正常，但它看起来可以优化，因为它只是颠倒了三元顺序。 知道如何实现吗？

if ($("#advanced-search-panel").hasClass("hidden")) {
    adv_text.text(adv_text.text() == "Show advanced search" ? "Hide advanced search" : "Show advanced search");
}else{
    adv_text.text(adv_text.text() == "Hide advanced search" ? "Show advanced search" : "Hide advanced search");
}

Answer 1

由于adv_text.text()只有两种可能性 - 显示和隐藏 - 整个条件

if ($("#advanced-search-painel").hasClass("hidden")) {

是多余的，因为无论该类是否存在，您都希望将文本从显示切换到隐藏，或者从隐藏切换到显示，具体取决于当前文本是什么。 您的代码简化为

adv_text.text(
  adv_text.text() == "Show advanced search" ? "Hide advanced search" : "Show advanced search"
);

另一种选择是为更改的文本部分设置一个内联元素，这样您只需检查并更改它。

<div><span class="adv-search-toggle-text">Show</span> advanced search</div>

const span = $('.adv-search-toggle-text');
span.text(span.text() === 'Show' ? 'Hide' : 'Show');

听起来hidden类可能与上面的文本切换有关。 如果是这样，您可以单独使用 CSS 规则在应用隐藏类时Show显示，并在未应用Hide类时显示隐藏。

Answer 2

作为第一步：如果$("#advanced-search-painel").hasClass("hidden")和adv_text.text() == "Show advanced search" "，您希望将"Show advanced search"作为结果adv_text.text() == "Show advanced search"为真或两者皆为假，因此您可以：

adv_text.text(
    $("#advanced-search-painel").hasClass("hidden") == (adv_text.text() == "Show advanced search")
    ? "Hide advanced search"
    : "Show advanced search"
);

但是正如@CertainPerformance 指出的那样，由于adv_text.text()的约束只有这两个可能的值， if和else分支的实现完全相同，因此实际上不需要if 。