0

jqueryでこれを行う方法は知っていますが、純粋な古い学校のJavaScriptで以下を実行しようとしています。誰かが助けることができます:

$(".thumbnail").click(function() {
    $("#mainImage").attr("src", $(this).attr("src"));
});

私の最終的な目標は、サムネイルをクリックしてメイン画像を変更することですが、javascript (jquery なし) で行う必要があります。これは非常に単純に聞こえることは知っていますが、理解できません。ありがとうございました。

4

3 に答える 3

1

jQuery が自動的に提供するものは非常に多いため、jQuery コードが行うすべてのことを行う答えを提供するのは困難です。thumbnailのクラスを持つすべての画像を検索し、そのonclickプロパティを画像スワップを実行するイベント ハンドラーに設定する簡単な例を次に示します。

onload = function () {
    var bigImg = document.getElementById("mainImage");
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];
        if (/\bthumbnail\b/.test(img.className) {
            img.onclick = thumbnailHandler;
        }
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

IE7 をサポートする必要がない場合は、以下を使用して少し簡略化できますdocument.querySelectorAll()

onload = function () {
    var bigImg = document.getElementById("mainImage");
    var thumbs = document.querySelectorAll(".thumbnail");
    for (var i = 0; i < thumbs.length; i++) {
        thumbs[i].onclick = thumbnailHandler;
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

余談ですが、メイン画像のソースをサムネイルのソースに設定している理由がわかりません。サムネイルに画像全体をロードしていますか? これは大量のダウンロードが必要になる可能性があり、ページのメモリ フットプリントが急速に増加する可能性があります。

于 2012-07-30T03:11:23.023 に答える
0

私が正しく理解していれば、関連する画像のサムネイル画像、たとえば「1thumb.png」、たとえば「1.png」が表示されています。このサムネイル画像をクリックすると、メインのsrc属性が変更されます。 image、たとえばid ='mainimg'を使用して、サムネイルに表示されているものではなく、サムネイルに関連付けられた'1.png'画像を表示します。私はこれを試しました、そしてそれは働きます:

あなたの中に<header>

<script type='text/javascript'>
function myHandler(source){
    document.getElementById('mainimg').src=source;
}
</script>
...

サムネイルコード:

<img src='1thumb.png' onclick="myHandler('1.png')"/>

または、ロールオーバートリガーの場合:

<img src='1thumb.png' onmouseover="myHandler('1.png')"/>

それをチェックしてください:http://jsfiddle.net/d7Q27/7/

于 2012-07-30T00:30:48.417 に答える
0

イベント委任はおそらく最も簡単な方法です:

function expandThumbnail(e) {
    if(~(' ' + e.target.className + ' ').indexOf(' thumbnail ')) {
        document.getElementById('mainImage').src = e.target.src;
    }
}

if(document.addEventListener) {
    document.addEventListener('click', expandThumbnail, false);
} else {
    document.attachEvent('onclick', function() {
        expandThumbnail({
            target: event.srcElement
        });
    });
}
于 2012-07-30T00:15:06.117 に答える