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

Posted 2023-02-23

【中文标题】如何使用三元运算符选择函数

【英文标题】：How to use ternary operator to select function

【发布时间】：2019-07-30 02:19:15

【问题描述】：

下面的sn-p工作

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

浏览器显示它是一个函数。为什么我不能调用它？

【问题讨论】：

node[condition ? 'addClass' : 'removeClass']('myclass'); 对我来说效果很好......节点到底是什么？我用$("body")[(1===1) ? "addClass" : "removeClass"]("b")测试了它

但您似乎只是在重新发明 toggleClass node.toggleClass("foo", condition)

@epascarello 谢谢！不知道有这个功能。

【参考方案1】：

您可以通过将函数分配给变量来做到这一点。

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


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

【参考方案2】：

它显然按照我在此处给出的示例的方式起作用。它不适用于额外的间接级别。

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


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

使用这段代码，Chrome 会告诉我：

未捕获的类型错误：无法读取未定义的属性“0”

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

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

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

【参考方案3】：

可以用 vanilla java 脚本切换

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