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');

    });

});

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

例如，如果我点击图像＆＃34; cat0.png＆＃34;，它将用＆＃34; ninja0.png＆＃34;替换它。（取决于我点击的图像），如果我点击图像＆＃34; cat1.png＆＃34;它将替换为＆＃34; ninja2.png＆＃34;等等。如果我也能够切换这个动作，我想要它。

请注意，每张图片都叠在一起。

Answer 1

这是你想要做的，如上所述你的意图不是很清楚？

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

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新：直接转换为jQuery

＆＃13;

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');
    }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你不应该使用$.toggle()！也许你可以试试这个：

$(document).ready(function(){
  $('img').click(function(){
    $('#main-wrapper > div').css('z-index', '5');
    $(this).closest("div").css('z-index', '10');
  });
});

#main-wrapper {
  width: 970px;
  margin: 0 auto;
}

img {
  display: inline-block;
  width: 100px;
  margin: 2px 0;
}


#first-wrapper {
  position: absolute;
  display: inline-block;
  left: -10px;
  z-index: 5;
  margin: 0 200px;
}

#second-wrapper {
  position: absolute;
  display: inline-block;
  left: 10px;
  z-index: 10;
  margin: 0 200px;
}

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

如何使用jQuery

2 个答案: