jquery step through images

Question

我想要做的就是能夠使用向上和向下箭頭依次命名圖像。我錯過了一些簡單的東西，我可以使用一些幫助。上下的字段不起作用。任何幫助表示讚賞。這裏是我的代碼：

HTML：

<div id = "up" class= "5" idnum= "number5">up up up</div> 
<img src="img/n5.png" id = "number5"> 
<div id = "down" lass= "5" idnum= "number5">down down down</div> 

<div id = "up" class= "26" idnum= "number4">up up up</div> 
<img src="img/n26.png" id = "number4"> 
<div id = "down" lass= "26" idnum= "number4">down down down</div> 

<div id = "up" class= "28" idnum= "number3">up up up</div> 
<img src="img/n28.png" id = "number3"> 
<div id = "down" lass= "28" idnum= "number3">down down down</div> 

<div id = "up" class= "30" idnum= "number2">up up up</div> 
<img src="img/n30.png" id = "number2"> 
<div id = "down" lass= "30" idnum= "number2">down down down</div> 

<div id = "up" class= "35" idnum= "number1">up up up</div> 
<img src="img/n35.png" id = "number1"> 
<div id = "down" lass= "35" idnum= "number1">down down down</div> 

的JavaScript：

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#up").click(function() { 
       var ball = $(this).attr("class"); 
       var idnum = $(this).attr("idnum"); 
       var test = $(this).find("img").attr("id"); 
       ball++; 
       console.log("ball = "+ball); 
       console.log("idnum = "+idnum); 
       console.log("test = "+test); 
       $("#"+idnum).attr("src","img/n"+ball+".png"); 

      }); 


      $("#down").click(function() { 
       var ball = $(this).attr("class"); 
       var idnum = $(this).attr("idnum"); 
       var test = $(this).find("img").attr("id"); 
       ball--; 
       console.log("ball = "+ball); 
       console.log("idnum = "+idnum); 
       console.log("test = "+test); 
       $("#"+idnum).attr("src","img/n"+ball+".png"); 

      }); 
     }); 
    </script> 

我知道我的代碼是非常笨重，臃腫在這一點上，但它的多個錯誤的測試結果並沒有得到東西上班。

Answer 1

Gabe是正確的;您不能多次使用某個ID。我的建議是這樣定位：

<div id="pictureNavigator"> 
    <div class="upButton optionalOtherClass">up</div> 
    <img src="n5.png"/> 
    <div class="downButton">down</div> 

<!-- ...etc...--> 
</div> 

但是其餘的我有點困惑;你能否直觀地解釋你期望這件事看起來如何，我們可以給你關於遵循的模式的基本想法？ （請記住，Stack Overflow往往不會爲你完成整個工作）

（之後評論：）所以這聽起來像是一個非常簡單的控制在Javascript端，而不是每個實例的HTML。基本的想法是將圖像索引（和上/下限）保持爲Javascript變量，並在每次點擊時將圖像的src屬性替換爲正確的屬性。我會給出一些未完成的代碼來展示我的想法。

$(function() { 
    var imgIndex = 10; 
    var minIndex = 0; 
    var maxIndex = 55; 

    function refreshIndex() { 
     // here, set the image's src to "n13.png", or whatever imgIndex is. 
    } 

    $('#pictureNavigator .upButton').click(function() { 
     imgIndex++; 
     refreshIndex(); 
    }); 
    $('#pictureNavigator .downButton').click(function() { 
     imgIndex--; 
     refreshIndex(); 
    }); 
}); 

可能還有其他一些事情需要考慮，但我認爲這應該足夠了。至於HTML，您只需要一個向上箭頭，一個向下箭頭和一個圖像。如果您願意，可能還有一種方法可以預先緩存要顯示給用戶的每個圖像，然後顯示它。 （你可能想要至少嘗試自己找出一個）