三元運算符中的 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 。