1

現在、多数のサムネイル画像を含むページがあります。ユーザーがサムネイル画像の 1 つをクリックすると、その画像の大きなバージョンが div に読み込まれます。これを行うために使用した JQuery は次のとおりです。

$(document).ready(function() {
  $('a.sigProBettonLink').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    image.onload = function () {
    $('.itemImage').empty().append(image);
    };
    image.onerror = function () {
      $('.itemImage').empty().html('That image is not available.');
    }
    $('.itemImage').empty().html('Loading...');
    return false;
  });
});

この機能は維持したいが、追加したい。ユーザーがどのようにしてそのページに到達したかに応じて、URL ページに多数の変数を含めることができるように、サイトをセットアップしました。例えば

http://www.mysite/mypage?image=1
http://www.mysite/mypage?image=2
http://www.mysite/mypage?image=3

基本的に、URL がhttp://www.mysite/mypage?image=1の場合、最初の画像を読み込みます (ユーザーが最初のサムネイルをクリックしたかのように)。URL がhttp://www.mysite/mypage?image=2の場合、2 番目の画像を div にロードする必要があります (ユーザーが 2 番目のサムネイルをクリックしたかのように)。

4

4 に答える 4

1

jQuery を使用したアプローチのプロトタイプ コードを次に示します。

デモとして、次の HTML スニペットを使用しました。

<a class="sigProBettonLink" href="http://placekitten.com/50/100">Image 1</a><br>
<a class="sigProBettonLink" href="http://placekitten.com/100/100">Image 2</a><br>
<a class="sigProBettonLink" href="http://placekitten.com/150/100">Image 3</a>

<div class="itemImage"></div>

ここにjQueryがあります：

$(document).ready(function () {
    var pathname = window.location.pathname;
    if (pathname.contains("image1")) {
        var urlvalue = $('a.sigProBettonLink').get(0);
    }
    if (pathname.contains("image2")) {
        var urlvalue = $('a.sigProBettonLink').get(1);
    }
    if (pathname.contains("image3")) {
        var urlvalue = $('a.sigProBettonLink').get(2);
    }
    image = new Image();
    image.src = urlvalue;
    image.onload = function () {
        $('.itemImage').empty().append(image);
    };

    $('a.sigProBettonLink').click(function () {
        var url = $(this).attr('href');
        image = new Image();
        image.src = url;
        image.onload = function () {
            $('.itemImage').empty().append(image);
        };
        image.onerror = function () {
            $('.itemImage').empty().html('That image is not available.');
        }
        $('.itemImage').empty().html('Loading...');
        return false;
    });
});

を使用window.location.pathnameして URL を取得し、ネイティブ JavaScript.contains()メソッドを使用して画像名を確認します。

デモ コードはhttp://jsfiddle.net/audetwebdesign/sdQTv/にあります。

機能の動作を確認するには、http: //jsfiddle.net/audetwebdesign/sdQTv/show/image2を試してください。

URL で名前と値のペアを使用している場合は、解析を微調整する必要がある場合があります ( ?image=1)。

URL の解析に関する情報と例については、
https ://developer.mozilla.org/en-US/docs/Web/API/window.location を参照してください。

ただし、この例は基本的なアプローチを示しています。

于 2013-09-16T12:04:34.373 に答える
0

Thank you to Marc Audet for poitning me in the right direction.

I have modified your code to the following:

$(document).ready(function() {

    var pathname = window.location.pathname;
    if (window.location.href.indexOf("image1") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(0);
    }
    else if (window.location.href.indexOf("image2") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(1);
    }
    else if (window.location.href.indexOf("image3") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(2);
    }
    else if (window.location.href.indexOf("image4") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(3);
    }
    else if (window.location.href.indexOf("image5") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(4);
    }
    else if (window.location.href.indexOf("image6") > -1) {
        var urlvalue = $('a.sigProBettonLink').get(5);
    }
    image = new Image();
    image.src = urlvalue;
    image.onload = function () {
        $('.itemImage').empty().append(image);
    };

    $('a.sigProBettonLink').click(function () {
        var url = $(this).attr('href');
        image = new Image();
        image.src = url;
        image.onload = function () {
            $('.itemImage').empty().append(image);
        };
        image.onerror = function () {
            $('.itemImage').empty().html('That image is not available.');
        }
        $('.itemImage').empty().html('Loading...');
        return false;
    });

});

This now works perfectly. Thank you so much to everyone for your help with this :)

于 2013-09-16T12:59:31.770 に答える