如何将 WordPress 循环数据发送到 jQuery？答案

【问题标题】：How to send WordPress loop data to jQuery?如何将 WordPress 循环数据发送到 jQuery？
【发布时间】：2020-10-15 21:11:47
【问题描述】：

我正在 Word Press 网站上创建一个带有嵌入视频的视频库，并且我想使用 jQuery 更改嵌入视频链接中的 URL。因此，所有视频帖子都将位于页面底部，当点击视频时，它将在页面顶部显示该视频。

我有一个用于显示所有视频帖子的 for 循环，我在帖子标题中添加了一个“数据链接”属性，我想用 the_title() 填充该属性

标题将是我要嵌入的视频的 URL

这是我的代码 -

<div class="embedded-video">
  <iframe width="420" height="315"
  src="youtubeLink" id="big-video">
  </iframe> 
</div>

<?php
  $args = array( 
    'post_type' => 'post', 
    'cat' => '2', 
    'order' => 'ASC',
    'numberposts' => 9
    );
  $product_posts = get_posts( $args ); 
?>

<?php foreach ( $product_posts as $post ) : setup_postdata( $post ); ?>

<div class="gallery-card-text">
  <h2 data-link="<?php the_title(); ?>" class="video-link"><?php the_title(); ?></h2>
  <p><?php the_excerpt() ?></p>
</div>

$('.video-link').click(function () {
  let newLink = $(".video-link").attr('data-link');
  console.log(newLink);
  $('#big-video').attr('src', newLink);
});

当我检查每个帖子的数据链接属性时，它会正确显示，例如帖子 2 的数据链接是帖子 2 的标题、帖子 3 的标题等。

但是当我点击任何标题时，我的控制台日志只显示第一篇文章的标题。

我怎样才能让它记录被点击的帖子的标题？

【问题讨论】：

标签： php jquery wordpress loops

【解决方案1】：

改变...

$(".video-link").attr('data-link');

到...

$(this).attr('data-link');

问题是您正在单击一个元素，进入该元素的事件处理程序，找到所有链接，然后从第一个链接中获取数据链接。不要查找被点击的元素，而是使用 this，它已经引用了事件处理程序绑定到的元素，并且源自。

【讨论】：