如何使用jQuery将变量值设置为div元素的backgroundImage背景图片

需要调整两处核心代码即可实现需求：

• 原代码中.my-div-1选择器未匹配到HTML中存在的元素，你需要先确保触发点击事件的元素（通常为img标签）使用正确的class名，且该元素存在src属性
• 将获取到的images变量拼接进backgroundImage的url参数中，替换原固定占位字符串

修改后的完整代码如下：

JS代码 #

$(document).ready(function() {
  // 选择器需和你实际触发点击的元素类名匹配
  $(".my-div-1").click(function() {
    var images = $(this).attr('src');
    // 拼接变量到url参数内
    $('#my-div').css('backgroundImage', 'url(' + images + ')');
    // 也可使用ES6模板字符串写法：$('#my-div').css('backgroundImage', `url(${images})`);
  });
});

如果触发点击的不是img标签（没有原生src属性），可以用自定义属性存储图片地址，比如给元素加data-bg-src属性，取值时用var images = $(this).attr('data-bg-src')即可。

CSS代码 #

可以保留原有样式，建议补充宽高属性让背景图显示更清晰：

#my-div {
  background-image: url('https://via.placeholder.com/800');
  width: 800px;
  height: 600px;
  color: #fff;
}

HTML代码 #

补充可点击的测试元素即可验证效果：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 新增可点击的测试图片 -->
<img class="my-div-1" src="https://via.placeholder.com/800/ff0000" alt="红色占位图">
<img class="my-div-1" src="https://via.placeholder.com/800/00ff00" alt="绿色占位图">

<div class="img_pilihan">
  <div id="my-div">#my-div</div>
</div>

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