javascript - 使用 javascript 交换用作背景的图像

Question

下面的 js 代码在 Prestashop 中用于通过单击缩略图来交换主图像:

$('.js-qv-product-cover').attr('src', $(event.target).data('image-large-src'));

主图像的 HTML 代码如下:

<div class="product-cover">
<img class="js-qv-product-cover" src="{$product.cover.bySize.ats_large.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
</div>

我尝试使用图像作为背景，并想出了以下代码:

<div class="product-cover" style="background-image: url({$product.cover.bySize.ats_large.url});"></div>

在 JS 文件中，我将 'src' 更改为 'url'，但当我单击缩略图时它不起作用。使主图像交换为背景的正确方法是什么？

Answer 1

这是使用 jquery 更改背景图像的方法。在您的情况下，只需将我使用的随机网址替换为 $(event.target).data('image-large-src') (应该是您自己的图像网址。

$('.change').on('click', () => {
  $('.container').css("background-image", "url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg')");
})

.container {
  width: 500px;
  height: 200px;
  background-image: url('https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

<button class="change">Change</button>