使用三元运算符切换按钮文本答案

【问题标题】：Toggling button text using ternary operator使用三元运算符切换按钮文本
【发布时间】：2014-11-07 20:02:23
【问题描述】：

我正在尝试使用三元运算符来切换按钮文本，但它不起作用。

<button type="button" id="ter" >Bar</button>

$("#ter").click(function(){
   $(this).text() = 'Bar' ? 'column':'Bar';
});

这样可以吗？我做错了什么？我知道还有很多其他方法可以实现这一点，但我只需要知道这种方法是否可行？

【问题讨论】：

标签： javascript jquery conditional-operator

【解决方案1】：

你也可以试试这个：

$("#ter").click(function(){
    var newText = ($(this).text() == 'Bar') ? 'column':'Bar';
    $(this).text(newText);
});

这会检查当前文本是否等于带有$(this).text() == 'Bar' 的“Bar”。如果是，它将变量 newText 设置为“列”（反之亦然）。第二行用新文本替换旧文本。

【讨论】：

这是一个有效的语句 - $(this).text((($(this).text() == 'Bar') ? 'column':'Bar'));跨度>
我可以将 console.log() 添加到选项中，如下所示？ $("#ter").click(function(){ var newText = ($(this).text() == 'Bar') ? ('column', console.log('column')) : (' Bar', console.log('Bar') ; $(this).text(newText); }); 我检查了这个但是没有用，我该如何添加 console.log() ？

【解决方案2】：

你用错了三元运算符。它去：

[statement] ? [code when true] : [code when false]

你现在基本上是在测试if('Bar')，它总是会返回 true。

【讨论】：

我正准备将其添加到我自己的答案中（增量编辑在平板电脑上慢）；但我看到你把它盖住了。所以：加一！

【解决方案3】：

你做错了，你可以改用这种方法：

$("#ter").click(function(){
   $(this).text(function (i, t) {
       return t === 'Bar' ? 'column':'Bar';
   });
});

它不起作用的原因是：

您试图将结果分配给$(this).text()（使用=）而不是比较（==或===），并且李>
不返回任何内容来更新文本

重要的是要注意，使用 jQuery 时，text() 方法（和大多数其他方法）在不带参数调用时是一个 getter（它获取当前值），但要将其用作 setter 你必须直接传递一个参数（$(this).text('foo')）或使用匿名函数（$(this).text(function(){ return 'foo'; })）。调用 getter 并比较检索到的值（或尝试分配给它）不会充当 setter。

在jQuery方法可用的匿名函数中，第一个参数（这里称为i，但名称无关紧要，它始终是第一个参数）是返回集合中当前'$(this)'对象的索引通过 jQuery，第二个参数（这里称为 t，但名称再次无关紧要）表示方法找到的当前（预操作）值。

参考资料：

text()。

【讨论】：

谢谢大卫，请你也请告诉我 i 参数的用途是什么？我有点理解那里的 t 但我是什么？