jquery - 如何通过单击使图像在背景中可见

Question

我是 Javascript 和 jQuery 的新手，并试图创建一个测试站点，只是为了看看使用 javascript 可以做什么。

我有个问题。

我在页面底部有 8 张图片。当您单击图像时，我想让 DIV Gallery 显示所选图像，并且图像将出现在页面的背景中。当您单击另一个图像时，该图像将显示在 DIV 图库和背景中。

HTML“画廊”

<div id="gallery">
    <ul>
        <li class="selected"><a href="(URL Img 1)"><img src="(URL Img 1)" alt="Photo 1" /></a>    
        </li>
        <li><a href="(URL Img 2)"><img src="(URL Img 2)" alt="Photo 2" /></a>    
        </li>
        <li><a href="(URL Img 3)"><img src="(URL Img 3)" alt="Photo 3" /></a>    
        </li>
        <li><a href="(URL Img 4)"><img src="(URL Img 4)" alt="Photo 4" /></a>    
        </li>
        <li><a href="(URL Img 5)"><img src="(URL Img 5)" alt="Photo 5" /></a>    
        </li>
        <li><a href="(URL Img 6)"><img src="(URL Img 6)" alt="Photo 6" /></a>    
        </li>
        <li><a href="(URL Img 7)"><img src="(URL Img 7)" alt="Photo 7"/></a>    
        </li>
        <li><a href="(URL Img 8)"><img src="(URL Img 8)" alt="Photo 8" /></a>    
        </li>
    </ul>
</div>

HTML 背景图片

<div class="background-container" style="background-image:url('(URL Img 1');"></div>

jQuery

我用这个尝试了一些东西：

$("li.selected").on("click", change);

});

但它似乎没有用，甚至没有接近。有谁知道丢失的链接？

非常感谢。- 亚希丘。

Answer 1

选择一个元素不会更改其类属性，因此$("li.selected")将始终引用列表中的第一个元素。即使不是这种情况，选择器也会（大概）在页面加载时进行评估，而不是在用户点击时进行评估；因此，即使您将其更改为使用所选元素，它仍会使用第一个元素。只有change当用户点击时运行的函数本身。

Answer 2

尝试这个

$(document).ready(function(){
    $("#gallery a").on("click", function(){
        $('.background-container').css('background-image',url(this.attr("href"));
    }); 
});

如果图像的 url 相同，您也可以删除<a>标记并仅<img>像这样播放：

$(document).ready(function(){
    $("#gallery img").on("click", function(){
        $('.background-container').css('background-image',url(this.attr("src"));
    }); 
});

Answer 3

你想要这样吗？演示http://jsfiddle.net/yeyene/wTt8Z/1/

$('#gallery a').on('click',function(){
    var url = $(this).find('img').attr('src');
    $('.background-container').css("background-image", "url("+url+")");
});