Jquery 单击图像时更改背景图像

我会尽量把这件事说得具体一些。我的网站上有一组9个公文包图标。单击其中一个时，我希望div的“背景图像”在其上方发生变化。我希望它淡入淡出

以下是公文包图标的代码：

<ul class="gallery">
    <li><a href="#" class="thumb"><span><img src="images/work-icon-1.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-2.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-3.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-4.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-5.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-6.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-7.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-8.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-9.jpg" alt="" /></span></a></li>
</ul>

这是我需要更改的div，具体取决于他们单击的图标：

<div class="work-header"></div>

---

非常感谢您的帮助。

您希望背景图像更改为什么

$('.thumb').click(function() {
  $('#word-header').css('background-image', 'url("img.jpg")');
});

是基本语法。再详细一点，我会更新这个

编辑您可以将背景图像存储为每个图标上的HTML5“数据-”属性，如下所示：

<img src="images/work-icon-1.jpg" alt="" data-header-img="images/header-1.jpg" />

---

使图像褪色更为复杂。你可以在谷歌上找到很多解决方案，或者希望有人能在这里花点时间向你展示。背景中的淡入淡出确实要复杂得多，但在你的情况下，你似乎可以使用一种稍微不同的方法，只需在所讨论的元素后面的绝对位置的div中淡入淡出。这说明了这一点。基本上，必要的jquery是：

$("#btn1").click(function() {
    $("#img1").fadeIn(1000);
    return false;
});

但当然，您希望扩展它，以便更好地处理按钮列表和淡出以前单击的“背景”。您可以在

标记的

数据bElementId

属性（或任何属性）中存储要淡入淡出的div的id，然后在单击处理程序中使用该id：

$(".thumb").click(function() {
    var bgElementId = $(this).attr("data-bgElementId"),
        bgElement = $("#" + bgElementId);

    bgElement.fadeIn(1000);
    $(".allBGs").not(bgElement).fadeOut(1000);
    return false;
});

---

谢谢你的两个回复。我能给你们两个发送到页面本身的实际链接，让你们知道我在说什么吗？你们应该在你们的问题文本中包含这个链接。我相信其他人会发现你的问题在某一点上很有帮助，有人可能知道更好的解决办法。如果您不想链接到服务器，请考虑制作JSFIDLE。

$(".thumb").click(function() {
    var bgElementId = $(this).attr("data-bgElementId"),
        bgElement = $("#" + bgElementId);

    bgElement.fadeIn(1000);
    $(".allBGs").not(bgElement).fadeOut(1000);
    return false;
});