如何复制PHP动态生成的img的src并赋值给span的background-image属性

存在的问题 #

• 点击事件取值错误：回调内使用$('.thumbs img').attr('src')只会匹配页面中第一个.thumbs容器下的图片地址，无法获取当前点击图片的src，需用$(this)指代当前触发事件的元素。
• 前后端变量混淆：直接把JS变量thisUrl写在PHP生成的HTML style属性中无效，PHP为服务端渲染语言，运行在页面加载前，JS为客户端脚本，运行在页面加载后，二者变量无法直接互通。
• 元素关联逻辑缺失：你生成的缩略图容器和对应lightbox标签都使用了同一个$i作为ID后缀，可以通过这个关联关系匹配到对应span元素修改样式。

修正后代码 #

JS代码

$(document).ready(function() {
    $('.thumbs img').click(function() {
       // 取当前点击图片的地址
       var thisUrl = $(this).attr('src');
       // 提取当前缩略图的序号
       var index = $(this).parent('.thumbs').attr('id').replace('thumbs', '');
       // 修改对应lightbox下span的背景图
       $('#img' + index + ' span').css('background-image', 'url("' + thisUrl + '")');
    });
});

PHP/HTML代码

// 缩略图部分代码不变
<div id="thumbs<?php echo $i;?>" class="thumbs">
   <img src="<?php the_sub_field( 'add_image' ); ?>" />
</div>

// lightbox部分不要在style里写JS变量，初始背景图可留空或填默认值
<a href="#" class="lightbox" id="img<?php echo $i;?>">
   <span style="background-image: url('');"></span>
</a>

额外提示 #

如果需要页面加载完成时span就默认对应上缩略图的背景，不需要等点击触发，直接用PHP输出地址即可，不用走JS逻辑：

<span style="background-image: url('<?php the_sub_field( 'add_image' ); ?>');"></span>

内容的提问来源于stack exchange，提问作者pv619