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

Question

我正在尝试做到这一点，以便在单击每个图像切片时，它会更改为不同的图片(即该图片后面的图片)。我也试图让它也切换。

这是我目前所拥有的:

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>

CSS

#main-wrapper {
 width: 970px;
 margin: 0 auto;
}

img {
 display: inline-block;
 width: 500px;
 margin: 2px 200px;
}


#first-wrapper {
 position: absolute;
 display: inline-block;
}

#second-wrapper {
 position: absolute;
 display: inline-block; 
}

jQuery

$(document).ready(function(){

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

    });

});

它没有像我预期的那样工作，当我单击图像时，我单击的每个 block 都消失了。

例如，如果我点击图片“cat0.png”，它将替换为“ninja0.png”(取决于我点击的图片)，如果我点击图片“cat1.png” "它将替换为 "ninja2.png"等等。如果我也能够切换此操作，我会喜欢它。

请记住，每张图片都是堆叠在一起的。

Answer 1

这是你想要做的吗，正如你所说你的意图不是很清楚？

还有其他(可能更好)的方法可以做到这一点。

var mainWrapper = document.getElementById('main-wrapper'),
    catImgs = [].slice.call(mainWrapper.getElementsByClassName('cat')),
    ninjaImgs = [].slice.call(mainWrapper.getElementsByClassName('ninja'));

mainWrapper.addEventListener('click', function (evt) {
    var target = evt.target,
        classList = target.classList;

    if (classList.contains('cat')) {
        classList.toggle('hidden');
        ninjaImgs[catImgs.indexOf(target)].classList.toggle('hidden');
    } else if (classList.contains('ninja')) {
        classList.toggle('hidden');
        catImgs[ninjaImgs.indexOf(target)].classList.toggle('hidden');
    }
}, false);

#main-wrapper > .cat,.ninja {
    width: 100px;
    height: 100px;
    display: block;
}
.cat {
    position: relative;
}
.ninja {
    position: relative;
    top: -500px;
}
.hidden {
    visibility: hidden;
}

<div id="main-wrapper">
    <img class="cat" src="http://lorempixel.com/100/100/animals/1" alt="cat picture 0">
    <img class="cat" src="http://lorempixel.com/100/100/animals/2" alt="cat picture 1">
    <img class="cat" src="http://lorempixel.com/100/100/animals/3" alt="cat picture 2">
    <img class="cat" src="http://lorempixel.com/100/100/animals/4" alt="cat picture 3">
    <img class="cat" src="http://lorempixel.com/100/100/animals/5" alt="cat picture 4">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/1" alt="ninja picture 0">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/2" alt="ninja picture 1">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/3" alt="ninja picture 2">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/4" alt="ninja picture 3">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/5" alt="ninja picture 4">
</div>

更新:直接转换为 jQuery

var $mainWrapper = $('#main-wrapper');
    $catImgs = $mainWrapper.find('.cat'),
    $ninjaImgs = $mainWrapper.find('.ninja');

$mainWrapper.on('click', 'img', function (evt) {
    var target = evt.target,
        $target = $(target);

    if ($target.hasClass('cat')) {
        $target.toggleClass('hidden');
        $($ninjaImgs[$.inArray(target, $catImgs)]).toggleClass('hidden');
    } else if ($target.hasClass('ninja')) {
        $target.toggleClass('hidden');
        $($catImgs[$.inArray(target, $ninjaImgs)]).toggleClass('hidden');
    }
});

#main-wrapper > .cat,.ninja {
    width: 100px;
    height: 100px;
    display: block;
}
.cat {
    position: relative;
}
.ninja {
    position: relative;
    top: -500px;
}
.hidden {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="main-wrapper">
    <img class="cat" src="http://lorempixel.com/100/100/animals/1" alt="cat picture 0">
    <img class="cat" src="http://lorempixel.com/100/100/animals/2" alt="cat picture 1">
    <img class="cat" src="http://lorempixel.com/100/100/animals/3" alt="cat picture 2">
    <img class="cat" src="http://lorempixel.com/100/100/animals/4" alt="cat picture 3">
    <img class="cat" src="http://lorempixel.com/100/100/animals/5" alt="cat picture 4">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/1" alt="ninja picture 0">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/2" alt="ninja picture 1">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/3" alt="ninja picture 2">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/4" alt="ninja picture 3">
    <img class="ninja hidden" src="http://lorempixel.com/100/100/sports/5" alt="ninja picture 4">
</div>