Issue
I would like to know how to change divs content with js or jQuery. I have a div with id="container"
which include 5 more divs with different id’s. What I need is to start with first div with id="vapor"
then, by clicking on a button to change onto next div with id="baiat"
and so on. Here’s my code, I couldn’t add any js or jQuery:
<div id="container" class="thirdcanvas">
<div id="vapor">
<img src="images/alfabet/w.png" alt=""/>
<img src="images/alfabet/f.png" alt=""/>
<img src="images/alfabet/v.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
<img src="images/alfabet/b.png" alt=""/>
<img src="images/alfabet/p.png" alt=""/>
<img src="images/alfabet/o.png" alt=""/>
<img src="images/alfabet/r.png" alt=""/>
</div>
<div id="baiat">
<img src="images/alfabet/p.png" alt=""/>
<img src="images/alfabet/b.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
<img src="images/alfabet/aa.png" alt=""/>
<img src="images/alfabet/i.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
<img src="images/alfabet/t.png" alt=""/>
</div>
<div id="colac">
<img src="images/alfabet/g.png" alt=""/>
<img src="images/alfabet/c.png" alt=""/>
<img src="images/alfabet/u.png" alt=""/>
<img src="images/alfabet/o.png" alt=""/>
<img src="images/alfabet/l.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
<img src="images/alfabet/c.png" alt=""/>
</div>
<div id="slapi">
<img src="images/alfabet/s.png" alt=""/>
<img src="images/alfabet/ss.png" alt=""/>
<img src="images/alfabet/l.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
<img src="images/alfabet/b.png" alt=""/>
<img src="images/alfabet/p.png" alt=""/>
<img src="images/alfabet/i.png" alt=""/>
<img src="images/alfabet/i.png" alt=""/>
</div>
<div id="umbrela">
<img src="images/alfabet/u.png" alt=""/>
<img src="images/alfabet/n.png" alt=""/>
<img src="images/alfabet/m.png" alt=""/>
<img src="images/alfabet/p.png" alt=""/>
<img src="images/alfabet/b.png" alt=""/>
<img src="images/alfabet/r.png" alt=""/>
<img src="images/alfabet/e.png" alt=""/>
<img src="images/alfabet/l.png" alt=""/>
<img src="images/alfabet/a.png" alt=""/>
</div>
</div>
I have now this code:
var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");
var imgNumber=0;
var numberOfImg = image.length;
function nextImage(){
$("#container div").not("#container div:first").each(function(){
$(this).addClass('hidden');
});
$("#click").click(function(){
var divWithoutHiddenClass=$("#container div").not("#container div.hidden");
divWithoutHiddenClass.addClass('hidden');
if(divWithoutHiddenClass.next().html()===undefined){
$("#container div:first").removeClass('hidden');
}
else{
divWithoutHiddenClass.next().removeClass('hidden');
}
});
if(imgNumber < numberOfImg){
imgNumber++;
}
document.slideImage.src = image[imgNumber-1];
}
if(document.images){
var image1 = new Image();
image1.src = "images/vapor.png";
var image2 = new Image();
image2.src = "images/baiat.png";
var image3 = new Image();
image3.src = "images/colac.png";
var image4 = new Image();
image4.src = "images/slapi.png";
var image5 = new Image();
image5.src = "images/umbrela.png";
}
with :
<a href="#" onClick="nextImage()"><img id="click" src="images/nextBtn.png" title="Continuare" /></a>
Solution
JS
$("#container div").not("#container div:first").each(function(){
$(this).addClass('hidden');
});
$("#click").click(function(){
var divWithoutHiddenClass=$("#container div").not("#container div.hidden");
divWithoutHiddenClass.addClass('hidden');
if(divWithoutHiddenClass.next().html()===undefined){
$("#container div:first").removeClass('hidden');
}
else{
divWithoutHiddenClass.next().removeClass('hidden');
}
});
Answered By – tilda
Answer Checked By – Robin (AngularFixing Admin)