Javascript 如何改进这个包含基本重复逻辑的toggleClass函数？

我有一个

toggleClass

函数，它基本上根据状态是删除还是重置来反转

if..else

中的类。有谁能给我一些建议，让我可以改进它，让它变得更好

JS

/**
 * Uses the click events currentTarget as the element and a state string
 * to work out how the required classes should be toggled.
 * 
 * @param $el - jQuery click event
 * @param state - string `reset` or `delete`
 */
toggleClass: function($el, state) {

    console.log('toggleClass', state);

    if(state === 'delete') {
        $el.toggleClass('js-delete-session js-reset-session');
        $el.toggleClass('fa-times fa-undo');
    } else {
        $el.toggleClass('js-reset-session js-delete-session');
        $el.toggleClass('fa-undo fa-times');
    }

},

---

切换类

js delete session

和

js reset session

的第一条语句在

if

和

else

块中都很常见，它可以移动到

if else

之外

toggleClass: function($el, state) {
    // Common to both delete and reset
    $el.toggleClass('js-delete-session js-reset-session');

    if(state === 'delete') {
        $el.toggleClass('fa-times fa-undo');
    } else {
        $el.toggleClass('fa-undo fa-times');
    }
},

此外，三元运算符还可用作

if…else

toggleClass: function($el, state) {
    $el.toggleClass('js-delete-session js-reset-session');
    state === 'delete' ? $el.toggleClass('fa-times fa-undo') : $el.toggleClass('fa-undo fa-times');
},

或者

---

当您在两个状态中切换相同的类时，不需要为这些状态编写单独的代码。您甚至可以将这些类放在同一个调用中：

toggleClass: function($el) {
  $el.toggleClass('js-delete-session js-reset-session fa-times fa-undo');
},

---

@答：对不起，我删除了我的评论，因为它基本上是相同的代码。我不建议这样使用条件运算符。您使用这个表达式是为了它的副作用，而条件表达式的实际用途是未使用的。@Guffa您能解释一下您的上一个问题吗comment@Tushar：在评论中你需要解释的是什么？花了些时间才意识到它们都是相同的类+1

toggleClass: function($el) {
  $el.toggleClass('js-delete-session js-reset-session fa-times fa-undo');
},