javascript - 在 Click 事件上获取从 PHP 传递到 JS 的变量，返回所有元素变量，而不仅仅是被单击的变量

Question

我正在编写 WP 代码，但我的问题特定于 JS。所以我在 StackOverflow 上发布了我的问题。最终目标是，单击帖子图像，在控制台上显示大图像的 HTML 标记。这是我的代码:

<div class="img lightbox-trigger">              
    <?php the_post_thumbnail(); ?>
    <div class="hover" >
        <i class="fa fa-arrows-alt"></i>
    </div><!--hover-->
</div><!-- .img .lightbox-trigger -->

<?php $large_thumb = get_the_post_thumbnail($post->ID, 'large') ?>

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(".lightbox-trigger").click(function(){
            var largeThumb = <?php echo json_encode( $large_thumb ); ?>;
             console.log( largeThumb );
        });
    });
</script>

问题是，当我点击其中一张帖子的图像时，所有其他帖子(有 10 个帖子)的 largeThumb 值都会打印在控制台上!

我不知道如何在这个特定上下文中使用 $(this) 来获取与被单击元素相关的值。

感谢任何帮助。

Answer 1

您可以使用data-*属性来存储 $large_thumb每个lightbox-trigger在相关div :

<div class="img lightbox-trigger" data-large-thumb='<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>'>              
    <?php the_post_thumbnail(); ?>
    <div class="hover" >
        <i class="fa fa-arrows-alt"></i>
    </div><!--hover-->
</div><!-- .img .lightbox-trigger -->

然后在js中你可以得到这个信息:

jQuery(document).ready(function($){
    $(".lightbox-trigger").click(function(){
         console.log( $(this).data('large-thumb') );
         console.log( $(this).html() );
    });
});

希望这有帮助。