Question

我的页面是一系列N img元素。我需要每个图像，当点击时，更改为他们自己的三个系列中的下一个图像。我在下面列出了我的html来解释。

<body>
    <div class="images">
        <div class="image_group">
            <img id="first" src="group1_image1"></img>
            <img id="second" src="group1_image2"></img> //this isn't displayed until clicked
            <img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
         </div>
         ...
         <div class="image_group">
            <img id="first" src="groupN_image1"></img>
            <img id="second" src="groupN_image2"></img>
            <img id="third" src="groupN_image3"></img>
          </div>
      </div>
</body>

每个image_group div在显示第二个图像时只显示一个图像，在显示第二个图像时显示，然后在点击时显示第三个图像，然后在第三次点击时循环回第一个图像。

我的问题是编写一个JQuery方法，可以通过在单击时使“第二”图像替换“第一”图像来执行此循环，依此类推。下面的方法重写了看似愚蠢的图像源，但我想不出更好的方法。我也不确定“第一”类图像是否会在“image_group”div中被隔离（应该如此），或者它是否会将页面上的所有图像更改为“第二”类图像。

$("#first").attr("src","group1_image2.jpg");

有人可以想办法吗？

Answer 1

我会做这样的事情

$("image_group img").on("click", function() {
    var index = $(this).index();
    $(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src); 
});

Answer 2

优化你的html：

<body>
    <div class="images">
        <div class="image_group">
            <img id="1,1" data_num="1,1" src="group1_image1"></img>
         </div>
         ...
         <div class="image_group">
            <img id="n,1" data_num="n,1" src="groupN_image1"></img>
          </div>
      </div>
</body>

然后你可以这样做：

$("image_group img").on("click", function() {
    var max = 3;
    var indexes = $(this).data('num').split(',');
    if ( indexes[1] == max
       indexes[1] = 1;
    else 
       indexes[1]++;
    $(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]); 
    $(this).data('num', indexes.join(','))
});

使用jQuery动态更改图像源

2 个答案: