Javascript 在单击事件时将变量从PHP传递到JS，将返回所有变量元素，而不仅仅是'；s咔嗒一声

我正在编写一个WP代码，但我的问题具体到JS。所以我把我的问题贴在StackOverflow。 最终的目标是，单击post图像，在控制台上显示大型img的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>

jQuery（文档）.ready（函数（$）{
$（“.lightbox触发器”）。单击（函数（）{
var largeThumb=；
控制台日志（largeThumb）；
});
});

问题是当我点击一个帖子的图片时，控制台上打印的所有其他帖子（共有10篇帖子）的

largeThumb

值

我不知道如何在这个特定的上下文中使用

$（this）

来获取与所单击的元素相关的值

---

非常感谢您的帮助。

您可以使用

数据-*

属性将每个

灯箱触发器的
$large\u thumb
存储在相关
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 -->

希望这有帮助。
$（this）是一个特殊变量，包含对当前对象的引用，在您的示例中，要检索.lightbox触发器的内容，可以执行此操作
$（this）.html（）
jQuery(document).ready(function($){
    $(".lightbox-trigger").click(function(){
         console.log( $(this).data('large-thumb') );
         console.log( $(this).html() );
    });
});