0

演習として、jQuery に頼らずに Javascript で hoverzoom スクリプトを作成しようとしています。このスクリプトは<a>、ページ上のすべてのリンクを配列に配置hrefし、拡張子 を検索しjpgて hoverzoom 関数を適用します。

私はそれを機能させることに非常に近づいています。<a>この関数は、ファイル名が jpg で終わるインスタンスでは正常に機能しますが、別の名前で終わるとコードが壊れます。問題のあるコードは次のとおりです。

for (var i = 0; i < aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aImages.push(aLinks[i]);
    }
    aImages[i].onmouseover = function() {
        hoverZoom(this);
    }
    aImages[i].onmouseout = function() {
        refresh(this);
    }
}

完全なスクリプトとライブ バージョンはこちら: http://james.is.agoodman.com.au/git/js_hoverZoom/

ライブ デモでわかるように、2 つの画像リンクで機能し、3 番目の非画像リンクで壊れ、その後の画像リンクも機能しません。

編集: 申し訳ありませんが、質問を指定するのを忘れていました。ソース拡張子が .jpg に一致する場合にのみ機能し、拡張子が一致しない場合は何もしないようにスクリプトを変更するにはどうすればよいですか?

4

3 に答える 3

3

ifイベント バインディングをステートメントに移動する必要があります。

for (var i = 0; i < aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aLinks[i].onmouseover = function() {
            hoverZoom(this);
        };
        aLinks[i].onmouseout = function() {
            refresh(this);
        };
        aImages.push(aLinks[i]);
    }
}

常にaImagesアイテムを配列にプッシュしているわけではないため、常にaImages[i]何かになるとは限りません。イベントバインディングをステートメントに移動して再配置すると、拡張子が「jpg」であることが保証されるため、イベントが既存のアイテムにバインドされてから、ifaImages

于 2012-12-18T09:47:07.007 に答える
2

あなたの問題は、ループにインデックスを付ける方法です:別のループを使用してaImages配列を作成し、それをループする必要があります:次のようなものが機能するはずです:

for (var i = 0; i < aLinks.length; i++) {
    aExtensions[i] = aLinks[i].href.split('.').pop();
    if (aExtensions[i].toLowerCase() == 'jpg') {
        aImages.push(aLinks[i]);
    }
}

for (var i = 0; i < aImages.length; i++) {
    aImages[i].onmouseover = function() {
        hoverZoom(this);
    }
    aImages[i].onmouseout = function() {
        refresh(this);
    }
}

そうしないと、画像以外のリンクによってインデックス作成が同期されなくなります

于 2012-12-18T09:47:02.603 に答える
1

関数が非 jpg ファイルに遭遇すると、if ブロックをスキップしますが、aImages 配列でそのリンクを見つけようとします。これはコードを壊します。

別の for ループを作成するか、if ブロックでイベントをバインドする方法をお勧めします。

于 2012-12-18T09:46:24.430 に答える