如何使用 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')");