2

我在尝试用双引号（“...”）替换以下代码中的单引号（'...'）时遇到了一些麻烦：

<img id="image" src="images/bird.jpg"  onmouseover="PlaySound('mySound'); this.src='images/bird_second_frame.jpg'" 
onmouseout="StopSound('mySound'); this.src='images/bird.jpg'">

每当我尝试用双引号替换单引号时，代码就会中断，而且我似乎找不到不同的解决方案。我被告知根本不要使用单引号 - 这是一个例外吗？

任何帮助表示赞赏。

4

3 回答 3

4

您不能"在由字符分隔的 HTML 属性值中使用"文字。它将提前终止属性值。

您可以包含一个 as &quot;，但这会使代码更难阅读。

<img id="image" src="images/bird.jpg" onmouseover="PlaySound(&quot;mySound&quot;); this.src=&quot;images/bird_second_frame.jpg&quot;" onmouseout="StopSound(&quot;mySound&quot;); this.src=&quot;images/bird.jpg&quot;">

我被告知根本不要使用单引号 - 这是一个例外吗？

不，你刚刚得到了不好的建议。

JavaScript 和 HTML 不区分'和 ，"除非确定哪些字符可以出现在它们之间而不会被转义。

在您的示例中使用'更具可读性。

更好的方法是完全避免内联 JavaScript。

<img id="image" 
     src="images/bird.jpg"
     data-sound="mySound"
     data-frame="images/bird_second_frame.jpg">

<script>
    var element = document.getElementById("image");
    element.addEventListener("onmouseover", play);
    element.addEventListener("onmouseover", stop);

    function play() {
        PlaySound(this.dataset.sound);
        this.dataset.original = this.src;
        this.src = this.dataset.frame;
    }

    function stop() {
        StopSound(this.dataset.sound);
        this.src = this.dataset.original;
    }
</script>
于 2016-11-04T13:15:51.523 回答
3

您不能在由双引号包围的字符串中使用双引号，因为它们会结束字符串。

在这种情况下，您使用单引号看起来很合适。

于 2016-11-04T13:17:16.943 回答
1

你可以在 JavaScript 中自由使用单引号；它们在语法上等同于双引号字符（尽管任何单个字符串常量都必须由同一种引号绑定）。这也适用于 HTML，因此您可以在 JavaScript 中使用单引号作为属性值分隔符来获得双引号：

<button onclick='alert("Hello World")'>Click Me</button>

但是，如果你真的想要到处都有双引号，你可以将它们作为 HTML 实体转义：

<button onclick="alert(&quot;Hello World&quot;)">Click Me</button>

这很难看，但它确实有效：HTML 解析器专门寻找引号字符。

最好的办法是停止在 HTML 中嵌入 JavaScript 事件处理程序设置，而纯粹使用 JavaScript。

于 2016-11-04T13:18:31.283 回答