Question

我的产品页面上有20个左右的产品。当您单击产品链接时，我想将2个参数传递给它重定向到的页面，图像src和文本属性，然后在div中显示这些参数。

ATM我的代码设置了标题和img数据属性，使用URL字符串中的属性重定向到正确的页面，但我不确定如何正确显示此信息。

如何将title和img属性参数传递给lineup / index.html页面，然后显示这两个属性？还有一种更好的方法是将这些属性放在URL查询字符串中吗？

产品链接

<a href="#" class="product" data-img="product1-img.jpg" data-title="Product1">More Information</a>

products.js

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        var name;
        name = $(this).data('title');
        window.location = './lineup/index.html?title=' + name + 'img' + img;
    });
});

阵容/ index.html中

<div class="text_area">
    <div id="title-area">TITLE ATTRIBUTE</div>
    <div class="product-img">
      IMG SRC
    </div>
</div>

如果有人需要更多代码，那么我只使用简单的HTML，javascript和jQuery。

Answer 1

要传递这两个参数，您可以试试这个

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        event.preventDefault();
        var name = $(this).data('title'), img = $(this).data('img')
        window.location = './lineup/index.html?title=' + name + '&img=' + img;
    });
});

要从key url解析值，您可以使用此功能（来源：MDN）

function loadPageVar (sVar) {
    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

在lineup/index.html中放置此代码和上面给出的功能

$(function(){
    $('#title-area').text(loadPageVar('title'));
    $('.product-img').text(loadPageVar('img')); // will set text

    // To set an image with the src
    $('.product-img').append($('<img/>', {
        'src':loadPageVar('img')
    }));
});

Answer 2

如果您正在寻找网址查询字符串的替代方法，我会查看window.sessionStorage对象。

存储参数如下：

$('.product').click(function(event) {
    event.preventDefault();
    window.sessionStorage.setItem('name', $(this).data('title'));
    window.sessionStorage.setItem('imgSrc', $(this).data('img'));
    window.location.reload(); //refreshes the page
});

然后加载属性，如果存在，请添加以下内容：

$(function(){
    if (window.sessionStorage.length){
        $('#title-area').text(window.sessionStorage.getItem('title'));

        $('.product-img').append($('<img/>', {
            'src':window.sessionStorage.getItem('imgSrc')
        }));
    }

    //include the click event listener for .product link here too
});

重定向到页面并传递text和image参数 - HTML JS

2 个答案: