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

Question

我正在创建一个在Word新闻网站上嵌入视频的视频库，我想使用jQuery来更改嵌入视频链接中的URL。所以，所有的视频帖子都在页面的底部，当点击一个视频时，它会在页面的顶部显示视频。

我有一个for循环，它显示所有的视频帖子，并且在我想用the_title()填充的帖子标题中添加了一个属性"data-link“。

标题将是我想嵌入的视频的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);
});

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

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

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

Answer 1

改变...

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

为了..。

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

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