Question

我目前有一个包含许多缩略图的页面。当用户单击其中一个缩略图图像时，该图像的较大版本会加载到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

基本上，如果网址为 http://www.mysite/mypage?image=1 ，那么我希望加载第一张图片（就像用户点击了第一个缩略图一样）。如果网址为 http://www.mysite/mypage?image=2 ，那么我希望第二张图片加载到div中（就像用户点击了第二个缩略图一样）等等。

Answer 1

在这种情况下，您需要解析URL。以下代码段将解析每个参数并将数组存储为变量：

var vars = [], hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
}

现在您可以测试是否设置了“图像”并决定要做什么

var image = '';
if( typeof vars["image"] != "undefined" ){
    //set
    image = vars["image"];
}else{
    //not set
}

<强>更新

哦，误解了。

您不需要document.URL，但需要链接href。

$('a.sigProBettonLink').click(function () {

   var vars = [], hash;

   //Clicked img url
   var q = $(this).attr('href'); // <----------------

    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
    }


    image = new Image();

    if( typeof vars["image"] != "undefined" ){

        //set the image url You will to load
        image.src = q;

    }else{
        //not set
        image.src = ' default url ?';
    }

    image.onload = function () {}
    ...


});

Answer 2

以下是使用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获取网址，然后使用原生JavaScript .contains()方法检查图片名称。

演示代码位于：http://jsfiddle.net/audetwebdesign/sdQTv/

要查看功能是否有效，请尝试：http://jsfiddle.net/audetwebdesign/sdQTv/show/image2

如果您在网址（?image=1）中使用了名称 - 值对，则可能需要调整解析。

有关解析URL的信息和示例，请参阅：
https://developer.mozilla.org/en-US/docs/Web/API/window.location

但是，这个例子说明了基本方法。

Answer 3

$(location).attr('href')为您提供当前网址

Answer 4

感谢Marc Audet向我倾斜正确的方向。

我已将您的代码修改为以下内容：

$(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;
    });

});

这现在完美无缺。非常感谢大家的帮助：）

根据URL将图像加载到div中

4 个答案: