使用window.location.href和Jquery更改多个URL参数

Question

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

单击时，每个选项都应在URL后面附加相关参数，同时保留其他参数并更改特定图像ID的src。 例如，当您单击红色颜料时，它将URL参数更改为'paint = red; wall = default; floor = default;'。 和img＃paint的src到'/paint/red.jpg'。 如果然后单击蓝色墙，则应更改为“ paint = red; wall = blue; floor = default;” 和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>

<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);

});  })

Answer 1

我也不会用汤匙喂养整个解决方案，但是请查看下面的代码片段，这足以使您入门（请确保您已阅读注释，您将需要使用Google来查找如何进行修改它也完全可以满足您的需求）。

基本摘要是：

1. 压缩您的javascript事件绑定并使用data-属性来帮助您处理可变部分
2. 您可以通过使用对象来缓存选择内容和jQuery的$.param()来构建URL。
3. 您需要Google的帮助才能完成：)

 (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>