0

我在这里有一个小脚本可以在 2 个图像之间切换...它的工作原理就像您选择第一个它保持选中状态，如果您选择第 2 个 - 第一个正在淡出并且正在选择第 2 个...就像那样简单。

$(document).ready(function () {
    $(".theImage img").click(function () {
        var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
        console.log(a);
        $(this).fadeOut();
        $("#" + a + " img").fadeIn()
    })
})

我的问题是我不知道如何将它用于超过 2 张图像？假设我有 id“product-holder3”，也许还有“product-holder4”，那么我该如何在那个 jquery 代码中编写它，所以它仍然在选择哪个之间切换？

HTML：

<div id="product-holder1" class="theImage">
  <img src="img/10-normal.png" />
</div>
<div id="product-holder2" class="theImage">
  <img src="img/25-normal.png" />
</div>
    <div id="product-holder3" class="theImage">
  <img src="img/50-normal.png" />
</div>

CSS

#product-holder1 {
    background: url("img/10-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 62px;
    cursor: pointer;
}
#product-holder2 {
    background: url("img/25-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 124px;
    cursor: pointer;
}
#product-holder3 {
    background: url("img/50-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 186x;
    cursor: pointer;
}

请告诉我如何将它用于 product-holder3，也许有一天我需要更多图像，所以请告诉我它是如何工作的？非常感谢！

PS我对jQuery一无所知：D

4

2 回答 2

1

这是基于以下评论中的讨论的更新：

// Listen for the click event of our many containers
$(".theImage").on("click", function(){
   // In the event clicked, find image, fade slowly to .01 opacity
   $(this).find("img").fadeTo("slow",0).end()
     // Then, of siblings, find all images and fade slowly to 100% opacity
     .siblings().find("img").fadeTo("slow",1);           
});​

演示：http: //jsfiddle.net/yvM8Z/2/

于 2012-05-25T18:34:46.657 回答
0

您需要创建一个集合，其中包含您正在循环通过的容器 div（或至少是它们的 id）。就像$(".theImage img:parent")您不必担心操纵自行车顺序一样。然后在您的点击功能中，您可以使用 id 查找当前集合元素$(this).parent().attr("id")，然后获取它的索引。一旦你知道了索引，你就可以移动到集合中的下一个项目（或者如果你在最后，则换行到开头）并获取新的 id，将其设置为你的变量的值a。

于 2012-05-25T18:28:41.293 回答