我正在尝试使用这些选项来修改页面上特定ID的图像源，并使用您所做的相关选项附加URL，以便在返回到该页面时生成内容URL。
单击时，每个选项都应附加带有相关参数的URL，同时保留其他参数以及更改特定图像ID的src。例如，当您单击红色涂料时，它会将URL参数更改为＆＃39; paint = red; wall = default; floor = default;＆＃39;和img＃paint的src到＆＃39; /paint/red.jpg'。如果你然后点击蓝色墙，它应该改为＆＃39; paint = red; wall = blue; floor = default;＆＃39;和img＃wall＆s; src to＆＃39; /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>
<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);
}); })
答案 0 :(得分：0)
我也不打算用勺子喂你整个解决方案，但查看下面的代码片段，它应该足以让你开始（确保你阅读评论，你需要使用谷歌找出如何修改它也完全符合你的需要）。
基本摘要是：
data-属性来帮助您处理变量部分$.param()
(function($) {
var urlprops = {};
$('#options > ul').on('click', 'li', function() {
var $this = $(this).addClass('selected'),
imgId = $this.parent('ul').data('img'),
img = $(imgId),
cat = $this.data('cat'),
style = $this.data('style');
// mark as selected so we can see it
$this.siblings().removeClass('selected')
// Set the image url
img.val('/' + cat + '/' + style + '.png');
// Set the attribute in a cache object
urlprops[cat] = style;
// Change the url
buildURL();
});
function buildURL() {
// im going to set a text input for demo purposes
// you should set the window hash or use html5 history push
var combinedProps = $.param(urlprops),
baseUrl = 'http://expl.com/demo?',
finalUrl = baseUrl + combinedProps;
$('#url').text(finalUrl);
}
// Start us off with everything defaulted on load
// This should also check the URL to see if there's any defaults
// set in the URL. There's plenty of jQuery libs and native
// JS code snippets you can get on google which will help you
// grab the location and parse out the parameters.
$('li:first', '#options > ul').trigger('click');
})(jQuery);.selected {
background: red;
}
#url {
color: blue;
font-size: 11px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
URL = <span id="url"></span>
</h3>
<h3>
images
</h3>
<input id="wallImg" text="/testpath/selwall/nopaint.jpg">
<input id="doorImg" text="/testpath/selwall/nopaint.jpg">
<input id="handleImg" text="/testpath/selwall/nopaint.jpg">
<input id="topImg" text="/testpath/selwall/nopaint.jpg">
<input id="floorImg" text="/testpath/selwall/nopaint.jpg">
<h3>
options
</h3>
<div id="options">
<ul class="selWall" data-img="#wallImg">
<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" data-img="#doorImg">
<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" data-img="#handleImg">
<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" data-img="#topImg">
<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" data-img="#floorImg">
<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>