PHP 中的 Javascript 蓝调 : getElementById & getElementsByClassName

Question

这应该很简单，可惜它给了我问题:

我有一个 PHP 页面，它为我提供了最多三个不同的 td 内容迭代。第一个使用 display: table-cell 显示，其他则使用 display: none 隐藏。

echo '<td style="display: table-cell" class="gameLineCell" id="'.$playerLine.'" colspan="3">';

&

echo '<td style="display: none" class="gameLineCell" id="'.$playerLine.'" colspan="3">';

然后，我有一个与每个 td 选项相对应的链接 - 单击它应该运行一个函数 loadLine，我向其中传递一个与 相对应的字符串>td ID。 ID 字符串类似于“EV-F1”——五个字符、一个数字、一个连字符。

echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";

该脚本隐藏了 gameLineCell 类的所有 td，并显示其链接被单击的那个。

<script>
    function loadLine(line) {
        var lines = document.getElementsByClassName('gameLineCell');
        for (var i = 0; i < lines.length; i++) {
            lines[i].style.display = 'none';
        }
            document.getElementById(line).style.display = 'table-cell';
    }
</script>

当我查看 PHP 页面的源代码时，所有内容都正确呈现 - 我的链接在 loadLine 括号中显示正确的字符串，我的每个 td 都存在，第一个显示，其他隐藏 - 但是我的链接不起作用。我尝试删除 getElementsByClassName 序列，仅运行 getElementById，但无济于事。什么也没发生。

有什么想法吗？

非常感谢任何帮助，

安德鲁

<小时/>

编辑:错误来源？ Javascript 正在切断我的弦! EV-F1 变为 EV。现在就研究原因以及如何解决。

Answer 1

这里有一些与字符串的正确转义和封装相关的问题；我个人使用 printf() 来打印 HTML，它看起来像这样:

printf('<td style="display: table-cell" class="gameLineCell" id="%s" colspan="3">',
    htmlspecialchars($playerLine, ENT_QUOTES, 'UTF-8');
);

这段代码特别棘手:

echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";

问题在于 $playerLine 不包含 JavaScript 字符串封装，因此它会尝试将 EV-F1 解析为 EV - F1 > (即 EV 和 F1 相减)。要解决这个问题，您需要使用 JSON 对变量进行编码，然后应用 HTML 转义:

printf('<a onclick="loadLine(%s)" href="javascript:void(0)">%s</a>',
    htmlspecialchars(json_encode($playerLine), ENT_QUOTES, 'UTF-8'),
    htmlspecialchars($playerLine), ENT_QUOTES, 'UTF-8')
);