jquery - 使用 JQuery 单击图像以更改 DIV 中背景的位置

Question

我已经尝试自己构建它，但就是无法让它工作。

我想要实现的是一行图像，如果单击它们，它们只会移动 div 的背景位置。

我不确定为什么我做不到这么简单的东西。这是 HTML

<div class="target"></div>
<a href="#"><img src="01_thumb.jpg" class="thumb"></a><a href="#"><img src="02_thumb.jpg" class="thumb"></a><a href="#"><img src="03_thumb.jpg" class="thumb"></a>

还有 CSS:

#content .item .target {width:240px; height:385px; margin: 0 0 8px; background-image:url(targetimage.jpg);} #content .item .thumb {width:64px; height: 64px; margin: 0 8px; background-color: #FF609C;}

Answer 1

你得到了 .index()如果单击的 anchor (如果它们不是其父元素中的唯一元素则调整)并将该值相乘以更改 .target 的 background-position，如下所示:

$("a:has(img.thumb)").click(function(e) {
  $(".target").css("background-position", -$(this).index()*240 + "px 0px");
  e.preventDefault(); //prevent navigating to the # href
});

Here's an example you can check out ，如果有很多 .item 元素，使用 $(this).closest(".item").find(".target") 而不是 $ (".target").