logo标签列表

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

javascriptjqueryternary-operatorfunction-call
3
以下代码片段有效。
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']);

浏览器显示这是一个函数，为什么我不能调用它？
3
node[condition ? 'addClass' : 'removeClass']('myclass'); 对我来说很好用... node 究竟是什么？我用 $("body")[(1===1) ? "addClass" : "removeClass"]("b") 进行了测试。 解释：以上代码是在JavaScript中使用条件运算符和jQuery的 addClass() 和 removeClass() 方法来添加或删除指定元素的类。node 是一个变量，代表一个DOM元素节点，可以通过jQuery选择器来获取。在第二个例子中，$("body") 选择了 <body> 元素并根据条件语句来添加或删除类名为 "b" 的CSS类。 - epascarello
2
但似乎您只是在重新发明toggleClass node.toggleClass("foo", condition)。 - epascarello
@epascarello 谢谢！我不知道那个函数存在。 - SU3
3个回答
1

显然，它按照我在这里给出的示例工作。但是如果有一个额外的间接层级，它就无法正常工作。

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

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

使用这段代码时，Chrome会告诉我：
Uncaught TypeError: Cannot read property '0' of undefined
但我发现可以通过使用“call”将“node”作为“this”传递给函数来绕过此问题。
print(condition ? node.addClass : node.removeClass).call(node,'myclass');

显然，在这种特定情况下，正确的解决方案是使用 toggleClass，正如 @epascarello 指出的那样。我有点惊讶，因为在这种情况下会丢失 this。
0

你可以通过将函数分配给一个变量来实现这一点。

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

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

0

可以使用原生JavaScript进行切换

node.classList.toggle('myclass',condition);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接