0

私が作成しようとしているのは、その画像の下でクリックされたサムネイルに応じて変化する画像です。私はオンラインで見て、いくつかの素晴らしい効果を備えた見栄えの良いサムネイルギャラリービューアをたくさん見つけましたが、必要なのは「シンプル」です.

オンラインで見つけた目的に合った要素に基づいて、スクリプトを少しまとめました。

HTML:

    <img id="image" src="/largeImage1.jpg"><br>
    <a id="link1" href="/largeImage1.jpg">picture 1</a><br>
    <a id="link2" href="/largeImage2.jpg">picture 2</a><br>
    <a id="link3" href="/largeImage3">picture 3</a>

Jクエリ:

    $("#link1").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link1").attr("href"));
      }).fadeIn(500);
      return false;
    });
    $("#link2").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link2").attr("href"));
      }).fadeIn(500);
      return false;
    });
    $("#link3").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link3").attr("href"));
      }).fadeIn(500);
      return false;
    });

わかりました、これは私が得た限りです（テキストリンクをサムネイルに変更する必要があり、少しCSSを投入する必要があります-これは私がよく知っています）。私が立ち往生しているのはjquery（好きなテーマではありません）です-繰り返しjqueryを凝縮する方法があると確信しています。最終的には、12 個のサムネイルの領域のどこかにあることになります。jquery の同じ 6 行を 12 回入力しても問題ありませんが (サムネイル リンクを毎回調整するだけです)、よりきちんとした (そして短い) 方法があればこれを達成すると、私はもっと幸せになるでしょう。

前もって感謝します、ウェイン

4

2 に答える 2

1

リンクを簡単に選択できるように、リンクにクラスを指定します。そのクラスのすべての要素にクリック イベントを追加します。thisクリックされた要素を取得し、そこからそのソースを見つけるために使用します。

$('.thumb-link').click(function(e) {
    e.preventDefault();
    var src = $(this).attr('src');
    $("#image").fadeOut(50, function() {
        $("#image").attr("src", src);
    }).fadeIn(500);
});
于 2013-08-16T20:22:31.410 に答える
0

ページに他のアンカー タグがない場合

$('a').click(function(){
 $("#image").attr("src",$(this).attr("href"));
})
于 2013-08-16T20:32:22.720 に答える