0

私がしたいのは、上向き矢印と下向き矢印を使用して、順番に名前が付けられた画像をステップスルーできるようにすることだけです。簡単なものが欠けているので、助けを借りることができます。up フィールドと down フィールドは機能しません。どんな助けでも大歓迎です。これが私のコードです：

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>

この時点で、私のコードが本当にぎこちなく肥大化していることはわかっていますが、これは複数のエラー テストの結果であり、機能していません。

4

1 に答える 1

0

ゲイブは正しいです。特定の ID を複数回使用することはできません。私のアドバイスは、次のように向けることです。

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

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

しかし、残りの部分については少し混乱しています。これがどのように見えると予想されるかを視覚的に説明していただけますか? 従うべきパターンについての基本的なアイデアを提供できますか? (注意してください、スタック オーバーフローはすべての作業を行うわけではありません)

(コメントの後:) したがって、これは、インスタンスごとに HTML を使用するのではなく、Javascript 側で制御するのが非常に簡単なように思えます。基本的な考え方は、画像インデックス (および上限/下限) を 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 に関しては、上向き矢印、下向き矢印、および画像が 1 つだけ必要です。必要に応じて、表示する前に、ユーザーに表示する各画像を事前にキャッシュする方法もあります。（少なくとも自分でそれを考えてみてください）

于 2013-05-28T20:31:28.947 に答える