Как использовать троичный оператор для выбора функции

#javascript #jquery #ternary-operator #function-call

#javascript #jquery #тернарный оператор #вызов функции

Вопрос:

Следующий фрагмент работает

 if (condition)
  node.addClass('myclass');
else
  node.removeClass('myclass');
  

но не этот

 node[condition ? 'addClass' : 'removeClass']('myclass');
  

ни этот

 (condition ? node.addClass : node.removeClass)('myclass');
  

Если я протестирую его с

 console.log(node[condition ? 'addClass' : 'removeClass']);
  

браузер выдает, что это функция. Почему я не могу это вызвать?

Комментарии:

1. node[condition ? 'addClass' : 'removeClass']('myclass'); у меня все работало нормально… Что такое node на самом деле? Я тестировал это с $("body")[(1===1) ? "addClass" : "removeClass"]("b")

2. Но, похоже, вы просто заново изобретаете toggleClass node.toggleClass("foo", condition)

3. @epascarello Спасибо! Не знал, что эта функция существует.

Ответ №1:

По-видимому, это работает так, как я привел здесь свои примеры. Это не работает с одним дополнительным уровнем косвенности.

 function print(x) {
  console.log(x);
  return x;
}

print(condition ? node.addClass : node.removeClass)('myclass');
  

С помощью этого кода Chrome сообщает мне следующее:

Неперехваченная ошибка типа: не удается прочитать свойство ‘0’ из undefined

Но я обнаружил, что могу обойти проблему, используя call для передачи функции node as this .

 print(condition ? node.addClass : node.removeClass).call(node,'myclass');
  

Очевидно, что правильным решением в данном конкретном случае является использование toggleClass , как указал @epascarello. Я немного удивлен, что this в этом сценарии теряется.

Ответ №2:

Может быть переключен с помощью ванильного Java script

 node.classList.toggle('myclass',condition);
  

Ответ №3:

Вы можете сделать это, присвоив функцию переменной.

 var twoLevel = {
  "foo" : {
    log: console.log
  },
  "bar" : {
    log: window.alert
  }
}

var fn = true ? twoLevel["foo"].log : twoLevel["bar"].log;
fn('test')