javascript - img onclick 在 quores 中不起作用

Question

我有这样的代码

 var cross=  '<img src="./img/cross.png"height="25px" width="25px" style="float: right; 
                              vertical-align: top"' + 'onclick="alert('+1+');">';

img 显示正确，但警报不起作用。另外，我想知道在编写带有许多引号的代码时是否有一些提示，或者有其他实现方式。

Answer 1

试试这个代码

var temp = "+1+";
var cross= "<img src='./img/cross.png' height='25px' width='25px' style='float: right; vertical-align: top' onclick='alert(temp)'">;

Answer 2

哥们，这有太多的错误，我不知道从哪里开始。

<img src="./img/cross.png"height="25px" width="25px" style="float: right; 
                      vertical-align: top"' + 'onclick="alert('+1+');">';

1. 属性之间应该有空格。不确定这是否是严格的 HTML 规范的一部分，但肯定有助于提高可读性。<img src="..." height="...">
2. 标签上的宽度和高度<img>是整数属性，而不是 CSS。所以<img width="25" height="25">
3. 以点开头的路径是不必要的，因为假定相对路径来自当前目录。正是src="img/cross.png"你想要的。
4. 为什么要连接两个文字字符串？有时防止行长失控是有道理的，但在您的情况下，这会使难以遵循的报价和转义变得更加困难。
5. 该onclick部分是一个带有双引号的单引号字符串，这很好，但是该字符串在第一个单引号处终止。所以你会onclick="alert(跟着+1which 被转换为一个字符串，onclick="alert(1然后附加最后一个字符串（右括号、分号、双引号、右尖括号）。令人惊讶的是，这似乎是语法上有效的 JavaScript。

简而言之，alert用反斜杠转义语句中的单引号。