2

私がやろうとしているのは、訪問者がサムネイルのセットをクリックして画像を変更できるようにすることです。ただし、私が直面している問題は、画像の場所をスクリプトにハードコーディングすることを本当に避けたいということです。使用するIDが一致する限り、スクリプトを古いページや画像のセットで実行できるように十分に移植可能にする必要があります。以下を変更して、A、B、またはCのsrcをXのsrcに置き換える方法はありますか？

JS

function clickSwitch() {
  var element = document.getElementById("bigscreen");
  element.setAttribute("src", "/img/projects/jamison/j2.jpg");
}

HTML

<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />

<ul class="project-thumbnails">
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a></li> 
<li><a href="#n" onclick="clickSwitch();"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two" /></a></li>
</ul>
4

3 に答える 3

0

要素を配列にロードし、inlin htmlの外部の各要素にイベントを追加します、何とか何とか何とか...しかしここに行きます：

onclickイベントに「this」を追加します。これにより、タグがclickSwitchに渡されます。そこから、大画面に必要なものを入手できます。

html

<a href="#n" onclick="clickSwitch(this);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" /></a>

javascript

function clickSwitch(el){
    var src = el.firstChild.getAttribute('src');
    var bigscreen = document.getElementById("bigscreen"); 
    bigscreen.setAttribute("src", src);
}
于 2009-10-05T22:11:42.063 に答える
0

正常に劣化するソリューションの場合、アンカーのハイパー参照として大きな画像の画像ソースを配置することをお勧めします。そのため、javascriptが存在しない場合、ユーザーは適切なフルサイズの画像にリダイレクトされます（jQueryを使用した例）。

<a class="thumbLinks" href="/img/projects/jamison/j1-BIG.jpg"><img src="/img/projects/jamison/j1-SMALL.jpg" alt="Jamison: View One" /></a>

$(document).ready(function() {
    $('a.thumbLinks').click(function() {
        //set the source of the big screen to the href of the clicked anchor
        //throw in some animation too
        $('#bigscreen').fadeOut("fast").
                       .attr('src', $(this).attr('href'))
                       .fadeIn();

        //prevent link from being followed if Javascript is present
        return false; 
    }
});

このアプローチの利点：

  • 親指をクリックすると、まだどこかに移動しているため、どのブラウザでも便利なことができます。
  • Javascriptコードはマークアップから完全に分離されています。
于 2009-10-05T22:37:59.500 に答える
-1

サムネイルにIDを付けて、関数パラメーターで送信します...

function clickSwitch(thumbClicked) {

var imgSrc = document.getElementById(thumbClicked).src;
var element = document.getElementById("bigscreen");
element.setAttribute("src", imgSrc);
}

HTML：

<img class="project-img" src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id="bigscreen" />
    <ul class="project-thumbnails">
    <li><a href="#n" onclick="clickSwitch(thumb1);"><img src="/img/projects/jamison/j1.jpg" alt="Jamison: View One" id = "thumb1" /></a></li>
    <li><a href="#n" onclick="clickSwitch(thumb2);"><img src="/img/projects/jamison/j2.jpg" alt="Jamison: View Two"  id = "thumb2"/></a></li>
</ul>
于 2009-10-05T22:20:00.210 に答える