如何解决在JavaScript点击事件中嵌入PHP代码的引号冲突问题？

错误原因说明 #

1. 第一种嵌入写法失败是因为你在onClick属性的JS字符串中间插入了大量换行，PHP输出内容后，JS的字符串被换行拆分，语法失效，导致点击无反应。
2. 第二种PHP全输出写法失败是因为PHP用单引号包裹字符串时，内部直接使用的单引号会被识别为字符串结束标记，触发语法冲突。

可行实现方案 #

方案1：直接内联嵌入PHP（最简写法） #

去掉PHP代码前后的换行，直接拼接在JS的URL字符串内即可，注意如果是URL查询参数，第一个参数前缀需要用?而非&：

<a style="cursor:pointer;" onClick="location.href='https://www.example.com/go/<?php $randomid = rand(361, 370); echo $randomid.'?name=john'; ?>'">LINK</a>

方案2：PHP输出完整a标签（解决引号冲突） #

对JS部分的单引号加反斜杠\转义，避免和PHP外层的单引号冲突：

<?php
$randomid = rand(361, 370);
echo '<a style="cursor:pointer;" onClick="location.href=\'https://www.example.com/go/'.$randomid.'?name=john\'">Link</a>';
?>

方案3：分离逻辑写法（更易维护，推荐） #

避免内联JS，将跳转地址存在自定义属性中，通过单独的事件监听实现跳转，完全规避引号嵌套冲突问题：

<!-- 生成带自定义跳转地址的a标签 -->
<?php $randomid = rand(361, 370); ?>
<a style="cursor:pointer;" class="jump-link" data-target="https://www.example.com/go/<?php echo $randomid.'?name=john'; ?>">LINK</a>

<!-- 单独绑定点击事件 -->
<script>
document.querySelector('.jump-link').addEventListener('click', function () {
  location.href = this.dataset.target;
});
</script>

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