CODEWITHSUNDEEP
javascriptjqueryhtmlclick
practicemakesperfect
practicemakesperfect

Reputation: 414

Show next image on top of the current image with JavaScript/jQuery

I have a series of images with the class of .piece in a div called #pieces. Only the first image #piece0 is shown initially, and as you click on #piece0, #piece1 appears on top of #piece0. And then when you click on #piece1, #piece2 appears on top. My current code doesn't do that. How do I fix that? 

<div id="pieces">
    <img class="piece" id="piece0" style="display:block;"/>
    <img class="piece" id="piece1" style="display:none;"/>
    <img class="piece" id="piece2" style="display:none;"/>
    <img class="piece" id="piece3" style="display:none;"/>
</div> 

<script>
    var pieceNum = $("#pieces").children().size();
    var i = 0;
    if (i < pieceNum) {
        $("#piece" + i).click(function({
            i++;
            $("piece" + i).css("display", "block");
        }));
    }
</script>

Upvotes: 0

Views: 77

Answers (6)

hs-dev2 MR
hs-dev2 MR

Reputation: 222

If you want to get element children size(length) , use $("#pieces img").length . But for your problem that is not necessary .

You can catch image click by $("pieces img").on("click".. and get next element by .next() then the last element have no next , for that case you can check by next().length . 0 will return if next element have no exist 

$("#pieces img").on("click",function() { 
     $(this).next().show();
     $("#pieces").append($(this));  
 });
#pieces {
  display: flex;
  flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
    <img class="piece" id="piece0" style="display:block;" alt="one"/>
    <img class="piece" id="piece1" style="display:none;" alt="two"/>
    <img class="piece" id="piece2" style="display:none;" alt="three"/>
    <img class="piece" id="piece3" style="display:none;" alt="four"/>
</div>

Upvotes: 1

Mohammad Ali Rony
Mohammad Ali Rony

Reputation: 4905

Try this

$(".piece").on('click', function(){
   $(".piece").hide();

   let id = (parseInt(this.id.slice(-1)) +1)%4;
     $("#piece" +id).show();

});
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
    <img class="piece" id="piece0" style="display:block;" alt="piece 0"/>
    <img class="piece" id="piece1" style="display:none;" alt="piece 1"/>
    <img class="piece" id="piece2" style="display:none;" alt="piece 2"/>
    <img class="piece" id="piece3" style="display:none;" alt="piece 3"/>
</div>

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You can use the next() to access next child and show() to display the img. Also, you will need to add position: absolute; to make images overlap each other.

$(document).ready(function() {
  $('.piece').on('click', function() {
    $(this).next().show();
  });
});
img {
  max-width: 100px;
  margin-right: 1em;
  position: absolute;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="pieces">
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" style="display:none;" />
  <img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
</div>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

$(document).ready(function(){
 var pieceNum = $("#pieces").children();
 var i = 0;
    if (i < pieceNum.length) {
        $("#piece" + i).click(function(){ 
            $("#piece" + i).css("display", "none");
            i++;
             $("#piece" + i).css("display", "block");
     
        });
    }

  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
    <img class="piece" id="piece0" style="display:block;" src="http://placekitten.com/g/200/300"/>
    <img class="piece" id="piece1" style="display:none;" src="http://placekitten.com/g/200/400"/>
    <img class="piece" id="piece2" style="display:none;" src="http://placekitten.com/g/200/300"/>
    <img class="piece" id="piece3" style="display:none;" src="http://placekitten.com/g/200/100"/>
</div>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You don't need to write multiple click events, You can have single click event attached to all elements and do traversing using .next() to show next element :

 $(".piece").click(function({
        var $nextPiece = $(this).next();
        if($nextPiece.length > 0)
            $nextPiece.css("display", "block");
 }));

Upvotes: 0

cccn
cccn

Reputation: 949

Try this: 

    var pieceNum = $("#pieces").children().size();
    var i = 0;
    if (i < pieceNum) {
        $("#piece" + i).click(function({
            $("piece" + i).css("display", "none");
            i++;
            $("piece" + i).css("display", "block");
        }));
    }

Upvotes: 0

Related Questions