IMG 点击在 quore 时不起作用

img onclick do not work when in quores

本文关键字：不起作用 quore IMG      更新时间：2023-09-26

我有这样的代码

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

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

试试这段代码

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

伙计，这有很多问题，我不知道从哪里开始。

<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(后跟+1，它被强制转换为字符串进行onclick="alert(1然后附加最后一个字符串(右括号、分号、双引号、右尖括号(。令人惊讶的是，这似乎是语法上有效的JavaScript。

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

相关文章：