Question

我是Javascript＆amp;的新手jQuery并尝试创建一个测试站点，看看使用javascript可以做些什么。

我有一个问题。

我在页面底部有8张图片。当您单击图像时，我想让DIV图库显示所选图像，图像将显示在页面的背景中。当您单击另一个图像时，该图像将显示在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);

});

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

非常感谢你。 - Yahitchu。

Answer 1

试试这个

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

如果图片的网址相同，您也可以删除<a>标记，并仅使用<img>进行播放：

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

Answer 2

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

Answer 3

你想要这样吗？ DEMO 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+")");
});

如何通过单击在后台显示图像

3 个答案: