jquery - 更改图像点击背景

Question

我有一个图像列表，当我单击其中一个图像时，我想更改 div 的背景。我有这样的东西，但它不起作用：

jQuery：

$('.container-inner').find('img').click(function(){
            var $url = $(this).attr('src');

                console.log($url);
        $('.container-outer').css({'background-image': $url});

 });

的HTML：

<div class="container-outer">
   <div class="container-inner">
    <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a>
      <a href="#"><img src="http://a.tgcdn.net/images/products/additional/large/e718_broke_something.jpg"/></a>
      <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a>
       <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>
       <a href="#"><img src="http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg"/></a>
        <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>
         <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>

   </div>
</div>

有任何想法吗？

Answer 1

你错过url(link here)了 CSS 的一部分：

$('.container-inner').find('img').click(function(){
    $('.container-outer').css('background-image', 'url('+this.src+')');
});

小提琴

Answer 2

您应该将最后一行更改为：

$('.container-outer').css("background-image", "url(" +$url+ ")");

此外，记录 $url 以查看它返回的内容。然后将其与设置背景图像的方式进行比较。