Question

以下代码段有效

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']);

浏览器显示它是一个功能。为什么我不能叫它？

Answer 1

这显然是我在这里给出示例的方式。不能使用一种额外的间接级别。

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

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

使用此代码，Chrome告诉我这一点：

未捕获的TypeError：无法读取未定义的属性'0'

但是我发现我可以通过使用call将node作为this传递给函数来解决该问题。

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

很明显，在这种情况下，正确的解决方案是使用toggleClass，就像@epascarello指出的那样。在这种情况下，this迷失了我感到有些惊讶。

Answer 2

可以使用普通Java脚本切换

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

Answer 3

您可以通过将函数分配给变量来实现。

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

如何使用三元运算符选择功能

3 个答案: