I have this code that toggle images inside div. My problem is when i try to toggle images in div-1 everything is ok but when im starting toggle images in div 2, images from div 1 dissapear and opposite way asswell. Please help. Im new in coding jquery. The website that im building have a lot. The website that im building have a lot more categories and i need to toggle images in all of them.
<html>
<body>
<div id="Image-Holder-bg" class="inner ">
<img class="animal1" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3a/100px-DJ.png/revision/latest?cb=20140813091425&path-prefix=pl" style="width:200px; height:200px;" />
<img class="animal2" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/7/7e/100px-Owen.png/revision/latest?cb=20140813152315&path-prefix=pl" style="width:200px; height:200px;" />
<img class="animal3" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/4/48/100px-Bridgette.png/revision/latest?cb=20140813090348&path-prefix=pl" style="width:200px; height:200px;" />
<img class="animal4" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/d/df/100px-Staci.png/revision/latest?cb=20140813153602&path-prefix=pl" style="width:200px; height:200px;" />
</div>
<div id="Cat" target=".animal1" class="carouselanimal">animal1</div>
<div id="Dog" target=".animal2" class="carouselanimal">animal2</div>
<div id="Zebra" target=".animal3" class="carouselanimal">animal3</div>
<div id="Peacock" target=".animal4" class="carouselanimal">animal4</div>
<div id="Image-Holder-fg" class="inner ">
<img class="popart1" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/38/100px-Leonard_ID.png/revision/latest?cb=20160304145758&path-prefix=pl" style="width:200px; height:200px;" />
<img class="popart2" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/0/00/100px-Duncan.png/revision/latest?cb=20140813123905&path-prefix=pl" style="width:200px; height:200px;" />
<img class="popart3" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/e/e1/100px-TDA_DIY_Char_Beth.png/revision/latest?cb=20140812140203&path-prefix=pl" style="width:200px; height:200px;" />
<img class="popart4" src="https://vignette.wikia.nocookie.net/totalna-porazka/images/3/3e/100px-Izzy.png/revision/latest?cb=20140812135527&path-prefix=pl" style="width:200px; height:200px;" />
</div>
<div id="art1" target=".popart1" class="carouselpopart">popart1</div>
<div id="art2" target=".popart2" class="carouselpopart">popart2</div>
<div id="art3" target=".popart3" class="carouselpopart">popart3</div>
<div id="art4" target=".popart4" class="carouselpopart">popart4</div>
</body>
</html>
<style>
.carouselanimal {
display: inline-block;
width: 50px;
Height: 50px;
background-color: black;
color: white;
}
.carouselpopart {
display: inline-block;
width: 50px;
Height: 50px;
background-color: black;
color: white;
}
#Image-Holder-bg {
width: 200px;
height: 200px;
border: solid 2px red;
overflow: hidden;
}
#Image-Holder-fg {
width: 200px;
height: 200px;
border: solid 2px red;
overflow: hidden;
}
</style>
<script>
$('.carouselanimal').click(function(a) {
var $target = $($(this).attr("target"));
$('img').hide();
$target.show();
});
$('.carouselpopart').click(function(b) {
var $target = $($(this).attr("target"));
$('img').hide();
$target.show();
});
</script>
Try the code below, the same goes for the other selector .carouselpopart
.
$('.carouselanimal').click(function(a){
$.each($('.carouselanimal'),function(i,v){
$($(v).attr("target")).hide();
});
$($(this).attr("target")).show();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.