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那么我希望将第二张图片加载到 div 中（就像用户点击了第二张缩略图一样）等等..

4

4 回答 4

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 () {}
    ...


});
于 2013-09-16T11:35:20.793 回答
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

?image=1如果您在 URL ( )中使用名称-值对，您可能需要调整解析。

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

但是，此示例说明了基本方法。

于 2013-09-16T12:04:34.373 回答
0

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

于 2013-09-16T11:06:44.230 回答
0

感谢 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;
    });

});

这现在完美无缺。非常感谢大家对此的帮助:)

于 2013-09-16T12:59:31.770 回答