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

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

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

FIDDLE

Answer 2

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

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

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

更改图像点击背景

2 个答案: