如何使用三元运算符来选择函数

Question

The following snippet works

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

but not this one

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

nor this one

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

If I test it with

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

the browser prints that it's a function. Why can't I call it?

Answer 1

It apparently works the way I gave my examples here. It doesn't work with one extra level of indirection.

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

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

With this code, Chrome tells me this:

Uncaught TypeError: Cannot read property '0' of undefined

But I found out I can circumvent the problem by using call to pass the node as this to the function.

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

Obviously, the right solution in this specific case is to use toggleClass , as @epascarello pointed out. I'm a little surprised that this gets lost in this scenario.

Answer 2

可以用vanilla java脚本切换

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

Answer 3

You can do this by assigning the function to a variable.

 var twoLevel = { "foo" : { log: console.log }, "bar" : { log: window.alert } } var fn = true ? twoLevel["foo"].log : twoLevel["bar"].log; fn('test')