jquery - 使用 jQuery 将背景图像的 url 替换为单击图像的 url

Question

当单击无序列表中的任何图像时，我希望与缩略图关联的 url 替换特定 div 的背景图像 css 值。说，

<ul>
  <li><a href="dog.jpg"><img src="dog_thumb.jpg" /></a></li>
  <li><a href="cat.jpg"><img src="cat_thumb.jpg" /></a></li>
</ul>
<div id="background" style="background-image: url('default.jpg')"></div>

当单击dog_thumb.jpg时，附加到它的href将被放入div的css中:

<div id="background" style="background-image: url('dog.jpg')"></div>

如果随后单击 cat_thumb.jpg，其 href 将随 div 的背景图像值切换。

显然，我不会在最终页面中使用内联样式。我知道如何将缩略图的 src 与页面上另一个图像的 src 进行切换，或者在整个类之间进行切换，但是，我似乎无法找到一种方法来操作单个类的一个属性。我想这样做，因为切换背景图像比使用 z 索引将一堆 div 放在彼此之上要容易得多。

Answer 1

   $('img').click(
        function (){
            $(this).parent('ul').next('div').css('background', $(this).attr('src'));
        }
   )

正如@RichardNeilIlagan 所建议的，

   $('img').click(
        function (){
            $('div#background').css('background', $(this).attr('src'));
        }
   )