CODEWITHSUNDEEP
jqueryhtml
Frosty
Frosty

Reputation: 334

Jquery display and hide div on counter change,but it doesn't

So basically what i am trying to do is to make my own image rotator

But with a counter funcionality ,counter start from 0 when you hit the next button counter goes to 1 and so forth,and does the same thing with the prev button but just goes down

The idea is for every number the counter hits up to 15,to show 1 of 15 div's

Counter itself is working,but when the counter goes to 1,it does not hide the 2-nd div

    <div class="image-holder" id="image1">
        <img src="image/data/rotator/pic1" alt="">
    </div>

    <div class="image-holder" id="image2">
        <img src="image/data/rotator/pic2" alt="">
    </div>

    <div class="image-holder" id="image3">
        <img src="image/data/rotator/pic3" alt="">
    </div>

<button id="next" type="">Next</button>
<button id="prev" type="">Prev</button>


<script>
    counter = 0;
    /*Next button*/
    $("#next").click(function(){
        counter++
        if (counter == 15) {
            counter = 0;
        };
    })
    /*Prev Button*/
    $("#prev").click(function(){
        counter--
        if (counter == -1) {
            counter = 0;
        };
    })
    /*Display image 1,hide all other images*/
    if (counter == 0) {
        $(".image-holder").hide();
        $("#image1").show();
    };
    /*Display image 2,hide all other images*/
    if (counter == 1) {
        $(".image-holder").hide();
        $("#image2").show();
    };
    /*Display image 3,hide all other images*/
    if (counter == 2) {
        $(".image-holder").hide();
        $("#image3").show();
    };
</script>

thing is if the counter starts at 1 ,it hides the 2-nd div ,i guess my counter doesn't work dynamically,can someone help me out?

Thanks

Upvotes: 1

Views: 166

Answers (2)

Cem Şengezer
Cem Şengezer

Reputation: 213

Show/hide section only runs when page loads for the first time. Your script should be like this:

<script>
counter = 0;
/*Next button*/
$("#next").click(function(){
    counter++
    if (counter == 15) {
        counter = 0;
    };
    refreshImages();
})
/*Prev Button*/
$("#prev").click(function(){
    counter--
    if (counter == -1) {
        counter = 0;
    };
    refreshImages();
})

function refreshImages() {
/*Display image 1,hide all other images*/
if (counter == 0) {
    $(".image-holder").hide();
    $("#image1").show();
};
/*Display image 2,hide all other images*/
if (counter == 1) {
    $(".image-holder").hide();
    $("#image2").show();
};
/*Display image 3,hide all other images*/
if (counter == 2) {
    $(".image-holder").hide();
    $("#image3").show();
}; 
}
</script>

Upvotes: 0

Satpal
Satpal

Reputation: 133433

You need show/hide the images in the click event handler of the button element.

counter = 0;
/*Next button*/
$("#next").click(function(){
    counter++
    if (counter == 15) {
        counter = 0;
    };

    $(".image-holder").hide().filter("#image" + (counter + 1)).show();
})

/*Prev Button*/
$("#prev").click(function(){
    counter--
    if (counter == -1) {
        counter = 0;
    };

    $(".image-holder").hide().filter("#image" + (counter + 1)).show();
})

Upvotes: 1

Related Questions