Javascript jquery单步图像

我所要做的就是能够使用上下箭头逐步通过顺序命名的图像。我缺少一些简单的东西，我需要一些帮助。上下两个字段都不起作用。感谢您的帮助。这是我的密码：

HTML:

向上
向下
向上
向下
向上
向下
向上
向下
向上
向下

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>

$（文档）.ready（函数（）{
$（“#向上”）。单击（函数（）{
var ball=$（this.attr（“类”）；
var idnum=$（this.attr（“idnum”）；
var test=$（this.find（“img”）.attr（“id”）；
ball++；
控制台.log（“ball=“+ball”）；
console.log（“idnum=“+idnum”）；
console.log（“test=“+test”）；
$（“#”+idnum.attr（“src”、“img/n”+ball+”.png”）；
});
$（“#向下”）。单击（函数（）{
var ball=$（this.attr（“类”）；
var idnum=$（this.attr（“idnum”）；
var test=$（this.find（“img”）.attr（“id”）；
球--；
控制台.log（“ball=“+ball”）；
console.log（“idnum=“+idnum”）；
console.log（“test=“+test”）；
$（“#”+idnum.attr（“src”、“img/n”+ball+”.png”）；
});
});

---

我知道我的代码在这一点上是非常笨重和臃肿的，但这是多个错误测试的结果，无法让东西正常工作

Gabe是正确的；您不能多次使用某个ID。我的建议是这样定位：

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

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

---

可能还有其他一些事情需要考虑，但我认为这应该足够了。至于HTML，您应该只需要一个向上箭头、一个向下箭头和一个图像。如果您愿意，您还可以在显示之前预先缓存要向用户显示的每个图像。（你可能想至少自己试着计算一下）

css类不应该以数字开头。你不能复制一个ID。确实如此：基本上，用户单击一个位于图像上方的向上箭头，图像将替换为下一个顺序编号的图像。还有一个向下的箭头做同样的事情，但是只是向下1而不是向上。因此，用户看到图像35（n35.png）并单击向上箭头：图像被图像36（n36.png）替换；在答案中添加了细节

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

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

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