#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')