Change multilple url parameters using window.location.href with Jquery

Question

I am trying to get these options to amend the image source of a particular ID on the page as well as append the URL with the relevant selections you have made so that the contents can be generated when coming back to the page on that URL.

When clicked, each of the options should append the URL with the relevant parameter while maintaining the others as well as change the src of a particular image ID. For example, when you click the red paint, it will change the URL parameters to 'paint=red;wall=default;floor=default;' and img#paint's src to '/paint/red.jpg'. If you then click the blue wall, it should change to 'paint=red;wall=blue;floor=default;' and img#wall's src to '/wall/blue.jpg'.

So far I have managed to amend the URL for the image IDs as well as amend the window.location to add one of the selection's parameters to the URL however I don't understand how to do multiple and maintain past selections / parameters.

Here is my code so far:

<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

I'm not going to spoon feed the entire solution too you, but view the code snippet below, it should be enough to get you started (make sure you read the comments, you'll need to use google to find out how to modify it too work exactly to your needs).

The basic summary is:

1. Condense down your javascript event bindings and use data- attributes to help you with the variable parts
2. You can build a URL by using a object to cache the selections and jQuery's $.param()
3. You'll need Google's help to complete it :)

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