三值算子中的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")) {

是多余的，因为不管类是否存在，您都希望根据当前文本的不同，切换从show隐藏或从隐藏到显示的文本。您的代码简化为

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。