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'));
        }
   )

Answer 2

您单击锚点，是否希望该href替换#background？根据您的示例：

// all links will work this way, based on your example
$('a').click(function(e){
    // replace the css background image with the one in the href
    // please note, this assumes the href is the absolute or relative URL to the image
    $('#background').css('backgroundImage', $(this).attr('href'));
    // stop the link from acting like a link
    e.preventDefault();
});

您还可以将img src广告从其中剥离并将其放入#background，您还可以在CSS中添加一系列类，并根据需要添加/删除类名以更改背景。（我建议将“default”作为一个类来添加默认图像，而不是内联）。

JavaScript操作内联CSS应该覆盖你拥有的默认样式（所以如果default.jpg与ID绑定，它应该覆盖它）。

使用jQuery将click-image的url替换为单击图像的url

2 个答案: