Question

<button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause</button>

如果我点击按钮，它会变为“开始”，当我再次点击时会变为“暂停”。

我已经写了另一个类似上面的段，但它不能按我的意愿工作：

<button onclick ="javascript: this.innerHTML{'true':'start','false':'pause'};">pause</button>

有人可以告诉我为什么吗？

Answer 1

有一个名为G的全局变量正在使用中。

{'true':'Start','false':'Pause'}

这会创建一个具有两个属性的对象。

其中一个名称为true，值为“开始” 另一个名称为false，值为“暂停”

将[G.pause=!!!G.pause]放在对象之后意味着从该对象中选择一个元素看看member [] operator

G.pause=!!!G.pause评估为true或false，同时将值分配回G.pause。这样，您可以切换值并从对象中选择相对属性。

示例http://www.jsfiddle.net/gaby/DfyYg/1/

Answer 2

使用花括号定义了一个对象文字：{和}。它有两个字段，true和false，您可以通过这些指标来引用它们。

G.pause=!G.pause部分是一个涉及一些未识别变量G的表达式。该表达式的计算结果为true或false;然而，这部分似乎被打破了。应为"Pause" != this.innerHTML

通过评估该表达式，您可以调用一个prevoriusly定义的字段，并将其内容传递给innerHTML调用。（看起来参数周围缺少一些大括号）

Answer 3

假设G.pause = false

var obj = {
    'true': 'Start',
    'false': 'Pause'
};

G.pause = !!!G.pause; // assignment, not equivalence

// !!!G.pause == !!!(false) == !!(true) == !(false) == true, so G.pause == true

下一次，G.pause翻回假。 !! val强制任何变量为原始布尔值，第三个！否定结果。它基本上是一个切换。

obj[true] == obj['true'] == 'Start'

JavaScript中的对象属性也可以使用数组表示法访问。

为此，必须在onclick处理程序之前定义G.pause。

Answer 4

我想补充一点，这段代码不是一个可以遵循的例子，为此目的声明一个文字对象会导致代码难以阅读。三元运算符完全满足需要：

<button onclick="this.innerHTML=(G.pause=!G.pause?'Start':'Pause');">Pause</button>

以下javascript代码如何工作？你能告诉我一些细节吗？

4 个答案: