在具有唯一值的列表中创建复制链接按钮 - PHP 和 JavaScript

Question

我正在编写自己的 WordPress 插件，这就是为什么某些代码可能看起来有点奇怪。但我的问题是使用普通的旧 PHP。

我创建了一个玩家列表，每个玩家都有一个唯一的 URL。我想在每一行/播放器上有一个“复制链接”按钮。但我似乎无法完成这项工作。

我不想在副本上更新网站，所以我想需要使用 Ajax 之类的东西。但我没有经验。

我尝试使用 JavaScript 创建它，但当我传入链接（字符串）时，它不断打印错误。 它打印：“意外的标记 ':'。预期 ')' 结束参数列表。”

我已经像这样设置了我的 PHP 文件：

<?php
// Fetching the players //

foreach($players as $player) {
    $player_email = get_post_meta($player->ID, 'email')[0];
    $player_status = get_post_meta($player->ID, 'status')[0];
    $player_link = get_permalink($player->ID);
    
    if ($player_status == 'Not completed') { array_push($not_completed_players, 'true'); }
    $return_html .= '
    <li class="players-div">
      <div class="players-text-div"> 
        <p class="players-list-p players-name"> ' . $player->post_title . ' </p>
        <p class="players-list-p players-email"> ' . $player_email . ' </p>
      </div>

      <a class="players-list-p" href="' . $player_link . '"> /' . basename($player_link) . ' </a>
      <p class="players-list-p players-email"> ' . $player_status . ' </p>

      <button type="button" onClick="copyToClipboard(' . $player_link . ')" name="copied_link" value="' . $player_link . '"> Copy link </button>
    </li>';
 }

?>

<script>
  function copyToClipboard(playerLink) {
    navigator.clipboard.writeText( playerLink );
  }
</script>

Answer 1

您应该用双引号或单引号将 copyToClipboard 函数的参数括起来。此解决方案通过添加反斜杠 (\) 来转义 '：

copyToClipboard(\'' . $player_link . '\')

您的播放器链接可能包含 https: 并且冒号会导致错误消息。