Question

我有以下代码（我将其格式化为更多行，但在我的源代码中我将它放在一行，因为innerHTML不喜欢新行 - 但是那个不是问题 ......）：

<?php
  echo "
    <img 
      src='1.png' 
      onclick='
        document.getElementById(\"my_div\").innerHTML=\"
          <img src=\\\"1.png\\\" onclick=\\\"alert(\\\\\\\"text\\\\\\\");\\\" />
        \";
      '
    />
  ";
?>

我身体的某个地方：

<div id="my_div"></div>

因此，当我点击图片时，我将在my_div中拥有相同的图片。 问题是，当我点击第二张图片时，javascript不会提醒任何内容。

但是当我改变这个时：

alert(\\\\\\\"text\\\\\\\");

到此：

alert(MyText);

并添加JavaScript变量MyText：

<script>
  MyText = "text";
</script>

它现在有效。

我认为问题出在那些嵌套引号上：

\\\\\\\"

（等级4）。有任何想法吗？感谢。

编辑：请不要在这里发布另一种方法，我想知道为什么这些报价在这里不起作用..

第二次编辑：我需要那里的PHP，因为这只是我的一部分代码（在完整代码中我需要它来循环显示图像......）

Answer 1

如果您想在HTML中将引号字符作为数据（而不是属性分隔符），则表示为"而不是\"

Answer 2

你的脚本中没有“动态” - 你没有插入PHP变量，那么为什么要在PHP回声中构建所有这些？只需：

或者如果你想让它更干净：

<script type="text/javascript">
    function addImg() {
        document.getElementById('my_div').innerHTML='<img src="1.png" onclick="alert(\'text\')" />';
    }
</script>

<img src="1.png" onclick="addImg()" />

Answer 3

将你的JS重构为一个外部文件（带有一个可以执行onclick逻辑的函数），并尝试使用php的echo输出更简单的东西

Answer 4

使用jQuery！

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="my_div"></div>
<img src="1.png" class="my_img" />
<img src="2.png" class="my_img" />
<img src="3.png" class="my_img" />
<script type="text/javascript">
  jQuery(function() {
    $('.my_img').click(function() {
      $('#my_div').html($(this).clone().unbind());
      alert('text');
    });
  });
</script>

嵌套引号4级javascript错误

4 个答案: