在循环中访问多个id错误 - Accessing multiple ids bug in a loop

我的错误框有一个小问题/bug。我将首先向您展示代码，然后是解释:这里我调用函数:

$jsid = 0;
    foreach ($errors as &$value) {
        $jsid++;
        echo $jsid;
        error('', $value, $jsid);
    }

…下面是函数:

function error($title, $error, $id)
{
    echo "<div id='warning".$id."' class='errorbox' style='border-style:solid; border-width: 1px; border-color:#FFF;'>
            <a style='float: left;' onClick='document.getElementById('warning".$id."').style.display = 'none';' aria-label='Exit View As...'  class='_7fy'></a>";
            if($title !== '') {
               echo "<h3>$title</h3>";
            }
            echo "<p>$error</p></div>";
}

我所做的是，因为我知道我会有多个具有相同ID的元素，我添加了foreach，这样它们就会不同，然后在函数中，我将添加ID我传递给'warning'。我看到它的方式是，它将确保JS的onclick工作。有没有人能解释一下出了什么问题?如果能修复这个问题，我们将不胜感激，而且还能节省大量敲击键盘的时间。

onClick="this.style.display = 'none'; return false;"

这样更容易，不是吗?

编辑:我同意FAngel说得更精确:

onClick="this.parentNode.style.display = 'none'; return false;"

你有一个基本的引用问题。混合三个不同的语言，并试图使其工作。你在PHP模式下，转储html，其中包含javascript，并使用相同的引号表示相同的东西。而不是这些丑陋的垃圾，使用一个HEREDOC，或者至少从混合中删除PHP，所以你只剩下html+js，例如:

echo <<<EOL
<div id="warning{$id}" class="errorbox" style="border-style:solid; border-width: px; border-color:#FFF;">
    <a style="float: left;" onClick="document.getElementById('warning{$id}').style.display = 'none';" aria-label="Exit View As..."  class="_7fy"></a>
EOL

——或——

?>
<div id="warning<?php echo $id ?>" class="errorbox" style="border-style:solid; border-width: px; border-color:#FFF;">
    <a style="float: left;" onClick="document.getElementById('warning<?php echo $id ?>}').style.display = 'none';" aria-label="Exit View As..."  class="_7fy"></a>
<?php

请注意引号是如何"自然"地工作的，不需要任何转义。

这就是问题所在:

onClick='document.getElementById('warning".$id."').style.display = 'none';'
        ^                        ^ - the string ends here

您在单引号内嵌套了单引号(')，这是一个错误，并导致onClick字符串提前终止。你需要把其中一个改成双引号。

onClick='"document.getElementById('warning".$id."').style.display = 'none';'"
        ^^ change to double-quotes, and escape for being inside PHP quote. ^^

尝试像下面这样格式化你的onclick部分:

onClick='"document.getElementById('warning".$id."').style.display = 'none';'"

所以，用右引号

就不会乱了

也，而不是使用ID，你可以使用parentNode(不需要分配ID在所有，但如果你包装，例如，你的a标签与一些其他元素-这部分将被打破):

onClick='"this.parentNode.style.display = 'none';'"

如果是标记，parentNode将指向需要关闭的div。事件处理程序中的this指向事件发生的元素。

https://developer.mozilla.org/en-US/docs/DOM/Node.parentNode