jquery: Can if statements firing sequentially?

Question

This code fires at the same time jumping from 01 to 04 immediately. I'm trying to get it to fire the second if statement on the second .mouseover of that image, and fire the 3rd if statement on the 3rd .mouseover etc. Can't seem to figure it out.

if($('img[src*="01"]')){
    $('img').mouseover(function () {
            $(this).attr('src', function(i, src) {
            return src.replace( '01', '02' );
        });
    })
}

if($('img[src*="02"]')){
    $('img').mouseover(function () {
            $(this).attr('src', function(i, src) {
            return src.replace( '02', '03' );
        }); 
    });
}

if($('img[src*="03"]')){
    $('img').mouseover(function () {
            $(this).attr('src', function(i, src) {
            return src.replace( '03', '04' );
        }); 
    });
}

Answer 1

You would have to create some kind of mechanism to keep the overall state of interaction. This mechanism would be the client side equivalent of the server side viewstate. I suppose you could use global variables to do it. Here the lifetime of the javascript variables is explained.

The lifetime of Global variables starts when they are declared, and ends when the page is closed.

Having these said, you would use a variable counting the hovering times of the specific user. Then you would check the hover times AND your condition. Your code should look something like this:

globalHoverCount = globalHoverCount + 1;
if(globalHoverCount=1){ //globalHoverCount is the global variable
    if($('img[src*="01"]')){
       $('img').mouseover(function () {
            $(this).attr('src', function(i, src) {
            return src.replace( '01', '02' );
           });
       }) }
}

Hope I helped!