2

次の JavaScript を使用しています。それは正常に動作しますが、さまざまなソースから寄せ集められた混乱です。

  • 一連の画像があります。
  • それぞれに小さいバージョン (1.gif) と、非表示のプリロードされた大きいバージョン (_1.gif) があります。
  • 小さいバージョンをクリックすると、大きいバージョンが置き換えられます。

  • もう一度クリックすると元に戻ります:

    var lastMove;
lastMove = new Date();

function preload(arr) {for (var i=0; i<arr.length; i++) (new Image()).src = arr[i];}

var index = 0;

var picsA = ["1.gif", "_1.gif"];
preload(picsA); picNumberA = 0;
function showNextPicA() {if (new Date() - lastMove < 200) return false; if (picNumberA == (picsA.length -1)) {picNumberA = 0;} else {picNumberA = picNumberA + 1;}document.getElementById('placeholderA').src = pics1[picNumberA];}

var picsB = ["2.gif", "_2.gif"];
preload(picsB); picNumberB = 0;
function showNextPicB() {if (new Date() - lastMove < 200) return false; if (picNumberB == (picsB.length -1)) {picNumberB = 0;} else {picNumberB = picNumberB + 1;}document.getElementById('placeholderB').src = picsB[picNumberB];}

  • など、ページ上の各画像は次のようになります。

    <img src="1.gif" id="placeholderA" onclick="return showNextPicA();"/>

まず、この混乱は危険か、不必要か、それとも問題ないか?

そして2番目：クリックすると画像ファイルが標準のプレフィックス（_など）のバージョンに切り替わり、もう一度クリックすると元に戻るように自動化する方法はありますか？

ふぅ。読んでくれてありがとう！

4

1 に答える 1

0

jQuery のような sth を使用できる場合は、各画像の onClick に、

showNextPic($(this))

それで

var prefix = "_";
showNextPic(imgelement) {
    var src = imgelement.attr('src');
    if(src.indexOf(prefix) == -1) {
         src = prefix + src;
    }
    else {
         // remove prefix from src
    }
    imgelement.attr('src', src);
}
于 2012-07-04T20:49:32.203 に答える