如何在PHP生成的<li>元素onClick事件中传递不同参数值？

嘿，我一眼就看出问题出在哪了——你没把文件名当成字符串传给JavaScript函数！当你直接写video_tag($back)的时候，PHP会把替换后的文件名（比如my_fileÓmp4）直接输出到HTML里，但JavaScript会把这玩意儿当成一个变量名去查找，而不是你想要的文件名本身，这就导致函数拿不到正确的值啦。

最简单的修正：给参数套个引号 #

其实你根本不需要替换文件名里的空格和点！只要把原文件名用引号包裹起来，作为字符串传给函数就行。修改后的代码长这样：

<div id="play"> </div>
<ul>
<?php
$files = scandir('media');
$anzahl = count($files);
for($i=2; $i<$anzahl; $i++){
    $temp_file = $files[$i];
    // 用双引号把文件名包成JS字符串，同时转义特殊字符避免踩坑
    echo "<li onclick='video_tag(\"" . addslashes($temp_file) . "\")'>" . htmlspecialchars($temp_file) . "</li>";
}
?>
</ul>
<script>
function video_tag(x){
    console.log(x);
}
</script>

给你拆解下关键操作： #

• 加引号：通过\"在HTML的onclick属性里生成双引号，最终输出的代码会是onclick='video_tag("my file.mp4")'，这样JavaScript就知道这是个字符串啦。
• 转义特殊字符：用addslashes()处理文件名，万一文件名里有引号（比如"cool video".mp4），会转成\"cool video\".mp4，不会破坏HTML的结构。
• 安全显示文件名：用htmlspecialchars()把文件名输出到页面上，防止文件名里的<、>这类字符搞乱页面布局，这也是个好习惯哦。

要是你非要保留替换逻辑怎么办？ #

如果你坚持要把空格换成下划线、点换成Ó，那也只要给参数加引号就行，代码改成这样：

$front = str_replace(" ","_",$temp_file);
$back = str_replace(".","Ó",$front);
echo "<li onclick='video_tag(\"" . $back . "\")'>".$temp_file."</li>";

这样改完之后，你点列表项的时候，console.log(x)就能正确输出你想要的文件名啦！

内容的提问来源于stack exchange，提问作者M. M.