如何将包含 javascript 的 wordpress 短代码调整为 jquery ajax（无需创建插件）？

Question

最近几天我一直在阅读有关在 wordpress 上下文中使用 ajax 的内容，我遇到的所有内容都是很长的示例，包括插件创建过程......我似乎无法适应我自己的目的 - 那目的是创建用于默认 wordpress 文本小部件的简码，不止一次。

我的简码（在functions.php中）是这样的：

function video_playlist_shortcode($atts) {
  $atts = shortcode_atts(
  array(
  'link' => '',
  'thumbnail' => '',
  'description' => ''
  ), $atts, 'playlist');

  return '<div class="video-item" onClick="document.querySelector("#video-frame").src="'.$atts['link'].'?autoplay=1&rel=0&showinfo=0&autohide=1"">
  <div class="video-thumbnail">
    <img src="'.$atts['thumbnail'].'" alt="" />
  </div>
  <div class="description">'.$atts['description'].'</div>
  </div>';
}
add_shortcode('playlist', 'video_playlist_shortcode');

它会根据我的需要打印简码的内容，但简码中的 javascript 代码部分显然不起作用。但我不知道如何提取它并将其与 ajax 一起使用。

提前感谢您的帮助。

Answer 1

你的电话在这里

return '<div class="video-item" onClick="document.querySelector("#video-frame").src="'.$atts['link'].'?autoplay=1&rel=0&showinfo=0&autohide=1"">

您遇到了一个问题，即包含三个嵌套引号并且没有正确关闭事物。

1. 包含整个字符串的第一个单引号
2. onClick 的双引号
3. querySelector() 的双引号

您需要像这样转义第 3 个 ( querySelector() ) 引号：\'#video-frame\' 以便它们起作用，然后正确关闭第二个（ onClick ）引号。看起来您之后试图连接 src（查看那个时期），但是最后有两个右双引号，并且 onClick 和 src 之间没有空格。

试试这个：

 return '<div class="video-item" onClick="document.querySelector(\'#video-frame\')" ' . 'src="'.$atts['link'].'?autoplay=1&rel=0&showinfo=0&autohide=1">

编辑：我错误地放置了转义的双引号，转义的单引号应该可以解决问题