jQueryの表示とカウンタ変化にdiv要素を隠し、そうではありません

Question

だから、基本的に私が何をしようとしています何を

自分のイメージローテータを作ることです。しかしカウンターfuncionalityと、0からカウンタスタートあなたがヒット[次へ]ボタンカウンタが1になり、等々、及びPREVボタンと同じことを行いますが、単に表示するために、ダウン

アイデアはカウンターが15までヒットするすべての番号です行く1の15のdivの

カウンタ自体は機能していますが、カウンタが1になると、2番目の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> 

これは、カウンタが1から始まる場合、2-divを非表示にします。私のカウンタは動的に動作しないと思います。

おかげ

Answer 1

あなたはbutton要素のクリックイベントハンドラで画像を表示/非表示する必要があります。

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(); 
}) 

Answer 2

セクションの表示/非表示は、ページが初めて読み込まれるときにのみ実行されます。あなたのスクリプトは次のようにする必要があります：

<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>