0

イニングと呼ばれる私のimgのimg srcを変更することになっている非常に単純なコードがあります。changeImageonclick 関数を呼び出し、現在の画像に応じてsrc、次の画像の繰り返しに変更するのは非常に簡単です。コードは次のようになります。

    <script type="text/javascript" >
        function changeImage() {
            var mySrc = document.getElementById('inning');
            alert(mySrc.src);
            if (mySrc.src = "1st.png") {
                alert('im in here');
                mySrc.src = "2nd.png";
            }
            else if (mysrc.src = "2nd.png")
                mysrc.src = "3rd.png";
            else if (mysrc.src = "3rd.png")
                mysrc.src = "4th.png";
            else if (mysrc.src = "4th.png")
                mysrc.src = "5th.png";
            else if (mysrc.src = "5th.png")
                mysrc.src = "6th.png";
            else if (mysrc.src = "6th.png")
                mysrc.src = "7th.png";
            else if (mysrc.src = "7th.png")
                mysrc.src = "8th.png";
            else if (mysrc.src = "8th.png")
                mysrc.src = "9th.png";
            else if (mysrc.src = "9th.png")
                mysrc.src = "10th.png";
            else if (mysrc.src = "10th.png")
                mysrc.src = "1st.png";

        }
    </script>
</head>
<body>
    <center>      <label>SlowPitch Player Rotation</label></center>
    <br /><br />

    <Center>
        <img id="inning" src="1st.png" 
                onclick='changeImage()' />
    </Center>

今私が抱えている問題は、画像にヒットするたびにchangeImage()関数がアラートにヒットし、src静止していることを知らせることです1st.png。その間、私の最初のアラートは、私が持っていることを教えてくれ2nd.pngますsrc

4

4 に答える 4

6

あなたが使用し=ているのは代入です。値が変数に割り当てられています。if ステートメントで等しいかどうかを確認したい。==(are they equal?) または===(are they equal AND same type?) のいずれかを使用します。

于 2013-05-09T21:58:31.497 に答える
4

すべてのif (mySrc.src = "image_name") {はずです

if (mySrc.src == "1st.png") {

2 つの == は等しいことを意味します

1 = 値を設定することを意味します

于 2013-05-09T21:58:53.390 に答える
1

他の人が言ったように、あなたの主な問題は、右===または==比較のために使用されていなかったことであり、プロパティを参照すると.src絶対パスが返されるため、おそらくその理由でも比較が機能しなかったでしょう。

とにかく、このようにコードをドライアップする(冗長性を取り除く) 新しい、よりコンパクトなコード設計をお勧めします。

これは、すべての比較を保存する正確な一致をチェックするのではなく、文字列から番号を解析しif/elseます。番号を取得したら、名前の配列に直接インデックスを付けることで次の名前を取得できます。

<script type="text/javascript" >
    function changeImage() {
        var names = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th"];
        var mySrc = document.getElementById('inning');
        // parse the number out of the existing .src string
        var matches = mySrc.src.match(/(\d+).*?\.png$/);
        if (matches) {
            // since array is 0 indexed and names are 1 indexed, we don't need to add one
            // as it is already one more than it was
            var num = parseInt(matches[1], 10);
            if (num >= names.length) {
                num = 0;
            }
            mySrc.src = names[num] + ".png";
        }
    }
</script>

参考までに、ファイル名に接尾辞が付いていない番号のみが含まれている場合( のようにimg1.png)、前の番号から新しい名前を作成するだけでよいため、名前の配列さえ必要ないため、コードはさらに単純になります。 .

于 2013-05-09T22:09:47.083 に答える
0

あなたの問題は、if ステートメントで 2 つの値を比較するのではなく、代わりに値を割り当てることです。

if (mySrc.src = "1st.png")

読むべき

if (mySrc.src === "1st.png")

それ以外の場合は、「1st.png」を mySrc.src に何度も割り当てます。

于 2013-05-09T22:00:33.723 に答える