无法在 jQuery 中更改 div 的背景图像

Posted 2023-05-08

【中文标题】无法在 jQuery 中更改 div 的背景图像

【英文标题】：Can't change background image of div in jQuery

【发布时间】：2020-09-30 06:47:27

【问题描述】：

我在脚本中添加了一个事件，该事件尝试在单击按钮时设置 div 的背景图像。但是，它不起作用。

代码如下：

html

<div class="col-md-2 imageCard" style="float:left">
            <img class="card-img-top"
              src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" >
</div>

<div class="card-body">
          <blockquote class="blockquote mb-0">
            <p id="quoteSample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer" id="quoteAuthorSample">Someone famous in </footer>
          </blockquote> 
</div> 

JS

$('.imageCard').click(function()
    var imageSRC = ($(this).children('img').attr('src'));
    console.log(imageSRC)
    $('.card-body').css("background-image", "url(" + imageSRC + ")")
)

Console.log 返回： https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg

【问题讨论】：

我试过你的代码，它应该可以工作，也许你看不到图像，因为它的大小，尝试添加$('.card-body').css("background-size", "contain")和$('.card-body').css("background-repeat", "no-repeat")

您在 console.log 中得到了什么？并包含imageCard类的html代码。

什么是.imageCard？它不包含在 html 中。

【参考方案1】：

当脚本尝试设置事件监听器时，就像按钮元素$('.imageCard') 没有准备好（在本例中为：click）。

为此，您有两种选择：

将您的脚本标签放在页面底部，这样它们就会在 HTML 之前加载，因此它会找到已经呈现的按钮。

把你的jquery点击一个窗口加载事件，你可以这样使用：

$(document).ready(function() 
    // Jquery click event
);

此代码确保您的 javascript DOM 代码仅在文档（HTML 页面）完全呈现时运行

希望对你有帮助！！

【讨论】：

感谢您的回复！我尝试了代码，但它不起作用。我在帖子中包含了更多信息。

【参考方案2】：

我发现了，问题出在连接赋值上，background-image CSS 属性可以通过添加url() 来接收一个URL，但是这个url() 需要接收一个字符串，如果你直接使用它就可以了js，但是由于您是通过函数添加此属性（在参数中使用字符串），因此您需要小心最终返回，例如（您可以在浏览器控制台上尝试）：

将字符串（链接）分配给变量

    var imageSRC = "https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"

只需输入，返回将类似于

    "url(" + imageSRC + ")" // "url(https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg)"

现在，注意url()里面的链接，它不再是字符串，只是文本，url()必须接收字符串

你可以通过两种方式解决这个问题：

使用"url('" + imageSRC + "')" 而不是"url(" + imageSRC + ")" 这样您就可以在参数上加上正确的引号

使用 javascript 模板字符串（您可以在此处阅读更多信息：https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings）

`url("$imageSRC")`