Javascript 使用window.location.href和Jquery更改multilple url参数

我试图获得这些选项，以修改页面上特定ID的图像源，并将您所做的相关选择附加到URL，以便在返回该URL上的页面时生成内容

单击时，每个选项都应在URL后附加相关参数，同时维护其他选项，并更改特定图像ID的src。例如，单击红色绘制时，它将URL参数更改为“绘制=红色”；墙=默认值；地板=默认值；'和img#paint的src到'/paint/red.jpg'。如果然后单击蓝色墙，它应更改为“paint=red”；墙=蓝色；地板=默认值；'和img#wall的src到'/wall/blue.jpg'

到目前为止，我已经成功地修改了图像ID的URL以及修改了window.location以将一个选择的参数添加到URL中，但是我不知道如何执行多个操作并维护过去的选择/参数

以下是我目前的代码：

<div id="holder">
<img id="wallImg" src="/testpath/selwall/nopaint.jpg">
<img id="doorImg" src="/testpath/selwall/nopaint.jpg">
<img id="handleImg" src="/testpath/selwall/nopaint.jpg">
<img id="topImg" src="/testpath/selwall/nopaint.jpg">
<img id="floorImg" src="/testpath/selwall/nopaint.jpg">
<div id="loader"></div>

---

我不打算向你介绍整个解决方案，但是查看下面的代码片段，它应该足以让你开始（确保你阅读了评论，你需要使用谷歌来找出如何修改它，使之完全符合你的需要）

基本总结如下：

压缩javascript事件绑定并使用

数据-

属性来帮助您处理可变部分

您可以通过使用对象缓存选择和jQuery的

$.param（）

你需要谷歌的帮助才能完成：）

（函数（$）{
var urlprops={}；
$（'#options>ul'）。在（'click'，'li'，function（）上{
var$this=$（this）.addClass（'selected'），
imgId=$this.parent（'ul'）.data（'img'），
img=$（imgId），
cat=$this.data（'cat'），
style=$this.data（'style'）；
//标记为选中，以便我们可以看到它
$this.sides（）.removeClass（'selected'）
//设置图像url
img.val（'/'+cat+'/'+style+'.png'）；
//在缓存对象中设置属性
urlprops[cat]=样式；
//更改url
buildURL（）；
});
函数buildURL（）{
//我将为演示目的设置一个文本输入
//您应该设置窗口哈希或使用html5历史推送
var combinedProps=$.param（urlprops），
baseUrl=http://expl.com/demo?',
finalUrl=baseUrl+组合道具；
$（'#url'）.text（finalUrl）；
}
//让我们开始加载默认的所有内容
//这还应该检查URL，看看是否有任何默认值
//在URL中设置。有大量jQuery库和本机库
//你可以在谷歌上获得JS代码片段，这将对你有所帮助
//抓取位置并解析出参数。
$（'li:first'，'#options>ul'）。触发器（'click'）；
})（jQuery）
。已选定{
背景：红色；
}
#网址{
颜色：蓝色；
字体大小：11px；
}

URL=
图像
选择权

蓝色
红色
绿色


白门
红门>
黄门


圆形旋钮
杯把手
条形把手


木质顶部
塑料顶部
stone top


木地板
瓷砖地板
层压地板

我不打算向您介绍整个解决方案，但请查看下面的代码片段，它应该足以让您开始使用（请确保您阅读了注释，您需要使用谷歌了解如何根据您的需要对其进行修改）

基本总结如下：

压缩javascript事件绑定并使用
数据-
属性来帮助您处理可变部分
您可以通过使用对象缓存选择和jQuery的
$.param（）
你需要谷歌的帮助才能完成：）

（函数（$）{
var urlprops={}；
$（'#options>ul'）。在（'click'，'li'，function（）上{
var$this=$（this）.addClass（'selected'），
imgId=$this.parent（'ul'）.data（'img'），
img=$（imgId），
cat=$this.data（'cat'），
style=$this.data（'style'）；
//标记为选中，以便我们可以看到它
$this.sides（）.removeClass（'selected'）
//设置图像url
img.val（'/'+cat+'/'+style+'.png'）；
//在缓存对象中设置属性
urlprops[cat]=样式；
//更改url
buildURL（）；
});
函数buildURL（）{
//我将为演示目的设置一个文本输入
//您应该设置窗口哈希或使用html5历史推送
var combinedProps=$.param（urlprops），
baseUrl=http://expl.com/demo?',
finalUrl=baseUrl+组合道具；
$（'#url'）.text（finalUrl）；
}
//让我们开始加载默认的所有内容
//这还应该检查URL，看看是否有任何默认值
//在URL中设置。有大量jQuery库和本机库
//你可以在谷歌上获得JS代码片段，这将对你有所帮助
//抓取位置并解析出参数。
$（'li:first'，'#options>ul'）。触发器（'click'）；
})（jQuery）
。已选定{
背景：红色；
}
#网址{
颜色：蓝色；
字号
<div id="options">
<ul class="selWall">
    <li data-cat="wall" data-style="bluepaint">Blue</li>
    <li data-cat="wall" data-style="redpaint">Red</li>
    <li data-cat="wall" data-style="greenpaint">Green</li>
</ul>

<ul class="selDoor">
    <li data-cat="door" data-style="white">White Door</li>
    <li data-cat="door" data-style="red">Red Door></li>
    <li data-cat="door" data-style="yellow">Yellow Door</li>
</ul>

<ul class="selHandle">
    <li data-cat="handle" data-style="round">Round Knob</li>
    <li data-cat="handle" data-style="cup">Cup Handle</li>
    <li data-cat="handle" data-style="bar">Bar Handle</li>
</ul>

<ul class="selTop">
    <li data-cat="top" data-style="wood">Wood Top</li>
    <li data-cat="top" data-style="plastic">Plastic top</li>
    <li data-cat="top" data-style="stone">Stone top</li>
</ul>

<ul class="selFloor">
    <li data-cat="floor" data-style="wood">Wood Floor</li>
    <li data-cat="floor" data-style="tile">Tile Floor</li>
    <li data-cat="floor" data-style="laminate">Laminate Floor</li>
</ul></div>

$(document).ready(function(event){


$('.selWall li').click(function() {
    var imgCat = $(this).attr('data-cat');
    var imgName = $(this).attr('data-style');
    var imgUrl = '#' + imgCat + '=' + imgName + '?';

    $('#wallImg').attr('src', '/' + imgCat + '/' + imgName + '.png');
    $(window.location).attr('href', imgUrl);

});

$('.selDoor li').click(function() {
    var imgCat = $(this).attr('data-cat');
    var imgName = $(this).attr('data-style');
    var imgUrl = '#' + imgCat + '=' + imgName + '?';

    $('#doorImg').attr('src', '/' + imgCat + '/' + imgName + '.png');
    $(window.location).attr('href', imgUrl);

});

$('.selhandle li').click(function() {
    var imgCat = $(this).attr('data-cat');
    var imgName = $(this).attr('data-style');
    var imgUrl = '#' + imgCat + '=' + imgName + '?';

    $('#handleImg').attr('src', '/' + imgCat + '/' + imgName + '.png');
    $(window.location).attr('href', imgUrl);

});

$('.selTop li').click(function() {
    var imgCat = $(this).attr('data-cat');
    var imgName = $(this).attr('data-style');
    var imgUrl = '#' + imgCat + '=' + imgName + '?';

    $('#topImg').attr('src', '/' + imgCat + '/' + imgName + '.png');
    $(window.location).attr('href', imgUrl);

});

$('.selFloor li').click(function() {
    var imgCat = $(this).attr('data-cat');
    var imgName = $(this).attr('data-style');
    var imgUrl = '#' + imgCat + '=' + imgName + '?';

    $('#floorImg').attr('src', '/' + imgCat + '/' + imgName + '.png');
    $(window.location).attr('href', imgUrl);

});  })