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>";

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

<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

您显示的代码有拼写错误。这里有一个额外的)

for (var i = 0; i < lines.length); i++)

应该是

for (var i = 0; i < lines.length; i++)

Answer 2

这里有一些与正确转义和封闭字符串有关的问题;我个人使用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')
);

PHP中的Javascript布鲁斯：getElementById＆amp; getElementsByClassName方法

2 个答案: