Javascript 如何使用jQuery切换多个图像与另一个图像的切片

我正试图使它这样，当每个图像切片被点击时，它将改变为一个不同的图片（这是图片后面的图片）。我还试图使它切换也

以下是我到目前为止的情况：

HTML:

    <div id="main-wrapper">
        <div id="first-wrapper">
            <img src="img/cat0.png" cat-pic-src="cat0.png" alt="cat picture 0">
            <img src="img/cat1.png" cat-pic-src="cat1.png" alt="cat picture 1">
            <img src="img/cat2.png" cat-pic-src="cat2.png" alt="cat picture 2">
            <img src="img/cat3.png" cat-pic-src="cat3.png" alt="cat picture 3">
            <img src="img/cat4.png" cat-pic-src="cat4.png" alt="cat picture 4">
        </div>
        <div id="second-wrapper">
            <img src="img/ninja0.png" ninja-pic-src="ninja0.png" alt="ninja picture 0">
            <img src="img/ninja1.png" ninja-pic-src="ninja1.png" alt="ninja picture 1">
            <img src="img/ninja2.png" ninja-pic-src="ninja2.png" alt="ninja picture 2">
            <img src="img/ninja3.png" ninja-pic-src="ninja3.png" alt="ninja picture 3">
            <img src="img/ninja4.png" ninja-pic-src="ninja4.png" alt="ninja picture 4">
        </div>
    </div>

jQuery

$(document).ready(function(){

$('img').click(function(){
    $(this).toggle().css('z-index', '10');

    });

});

当我点击图像时，我点击的每个块都消失了，这并没有像我预期的那样工作

例如，如果我单击图像“cat0.png”，它将替换为“ninja0.png”（取决于我单击的图像），如果我单击图像“cat1.png”，它将替换为“ninja2.png”，依此类推。我希望它，如果我也能够切换这个行动以及

---

请记住，每个图像都是堆叠在一起的

您不应该使用

$.toggle（）

！也许你可以试试这个：

$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
$（'#main wrapper>div'）.css（'z-index'，'5'）；
$（this）.closest（“div”）.css（'z-index'，'10'）；
});
});
#主包装器{
宽度：970px；
保证金：0自动；
}
img{
显示：内联块；
宽度：100px；
边际：2px0；
}
#第一包装{
位置：绝对位置；
显示：内联块；
左：-10px；
z指数：5；
利润率：0.200px；
}
#第二包装{
位置：绝对位置；
显示：内联块；
左：10px；
z指数：10；
利润率：0.200px；
}
这就是你想要做的事情吗，正如前面提到的，你的意图不是很清楚吗

还有其他（可能更好的）方法可以做到这一点


var mainWrapper=document.getElementById（'main-wrapper'），
catImgs=[].slice.call（mainWrapper.getElementsByClassName（'cat'），
ninjaImgs=[].slice.call（mainWrapper.getElementsByClassName（'ninja'）；
mainWrapper.addEventListener（'click'，函数（evt）{
var目标=evt.target，
classList=target.classList；
if（classList.contains（'cat'））{
切换（'hidden'）；
ninjaImgs[catImgs.indexOf（target）].classList.toggle（'hidden'）；
}else if（classList.contains（'ninja'））{
切换（'hidden'）；
catImgs[ninjaImgs.indexOf（target）].classList.toggle（'hidden'）；
}
}，假）
#主包装器>.cat、.ninja{
宽度：100px；
高度：100px；
显示：块；
}
猫先生{
位置：相对位置；
}
忍者先生{
位置：相对位置；
顶部：-500px；
}
.隐藏{
可见性：隐藏；
}

不太清楚您想要实现什么，所以我建议您创建一个JSFIDLE来演示您的问题。关于图片的消失-这是因为您使用了显示或隐藏元素的
toggle（）
。很抱歉，我添加了更多的示例。我认为您可能对所使用的标记有问题：因为每个
div
包装中的图像不是一个接一个地堆叠的，而是堆叠在一个
div
上，该div是堆叠在另一个
div
上的。如果图像直接堆叠在另一个图像上，那么解决方案是相当直接的。这非常有效，但是您知道如何使用jQuery库进行此操作吗？这是一个非常简单的转换，语法几乎相同。
$(document).ready(function(){

$('img').click(function(){
    $(this).toggle().css('z-index', '10');

    });

});