如何使用 jQuery 更改带有按钮的背景图片 url

Question

我想用 jQuery 向我的 css 添加一张背景 url 图像。 但我试过的任何东西都不起作用。

 let button = document.querySelector('form button.btn') button.addEventListener('click', () => { $(".img").css("background", "url('/images/Codax.jpg')"); })

 div.img { height: 450px; width: 350px; background-color: #fff; -webkit-box-shadow: 7px 1px 15px 0px rgba(0, 0, 0, 0.55); -moz-box-shadow: 7px 1px 15px 0px rgba(0, 0, 0, 0.55); box-shadow: 7px 1px 15px 0px rgba(0, 0, 0, 0.55); background: url(''); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; }

 <div class="perfil-img"> <div class="img"> </div> </div> <form> <button type="button" class="btn">Salvar</button> </form>

编辑

按照：链接中是项目中使用的目录。 文件夹

这个 Html 是从 FetchContent 调用的。 希望在 FetchContent 调用的 html 中添加图像。

<li class="nav-item">
  <a class="nav-link" href="#" a-view="infoPessoal" onclick="fetchContent(this)" a-folder="administrativo">
    <i class="fas fa-user-tag"></i>
    <!-- Icones -->
    Pesssoal
  </a>
</li>

Answer 1

使用../images/Codax.jpg的文件路径应该是相对于css文件的位置。 您需要使用../向上 1 目录。

 $(".img").css("background", "url('../images/Codax.jpg')")

Answer 2

为了分离关注点，我建议您创建一个具有相应背景图像集的 CSS 类，然后使用 .toggleClass() 方法切换该类，即 CSS 应如下所示：

.background{
background : url('http://lorempixel.com/400/200');
width : 100%
/*Whatever other parameter*/
}

JS：

$( "button" ).click(function() {
  $(".img").toggleClass( "background" );
});

这应该有效。

Answer 3

在这一行中使用background-image而不仅仅是background

 $(".img").css("background-image", "url('/images/Codax.jpg')");