使用jQuery根据子元素img的src设置按钮背景图失败求助

核心错误点 #

• 字符串拼接运算符错误：JavaScript中字符串拼接必须用+，你代码里误用了&，这会直接导致语法错误，代码无法执行。
• 无效的URL前缀：你在url()里硬加了image/前缀，但目标img的src已经是完整的https://开头的绝对路径，拼接后会变成url(image/https://...)，这是完全无效的背景图地址。
• 可选：DOM加载时机问题：如果代码在页面DOM元素还没渲染完成时就执行，$('li.has-thumbnail button')会找不到目标元素，自然不会生效。

修复后的代码 #

// 确保DOM完全加载后再执行代码
$(document).ready(function() {
    $('li.has-thumbnail button').each(function() {
        // 获取当前button下img的src属性
        const imgSrc = $('img', this).attr('src');
        // 仅当src存在时设置背景图
        if (imgSrc) {
            $(this).css('background-image', `url(${imgSrc})`);
        }
    });
});

额外优化建议 #

• 给button添加基础CSS样式，让背景图显示更合理：

.choice-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

• 如果这些列表项是通过AJAX动态加载的，需要在元素渲染完成后再执行上述JS代码，或者通过事件监听的方式处理新增元素。

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