JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id='results'></div>
<img src="images/no_image_selected.jpg" id="selected-img" height="140" width="130" align="center" /> <a id='selected-link' href='/cgi-bin/shoppingCart/addToCart.cgi?item=mywebsite&design=" + selected-img + "&description=outdoorthermometer&quantity=1&price=49'><img src="images/buy_green.jpg" border="0"></a>

<div id="img-bank" align="left">
    <input type="hidden" name="img-selection" />
    <img src="sc_images/therm84.jpg" height="125" width="123" data-seleted="sc_images/therm85.jpg" data-value="butterfly" />
    <input type="radio" name="img-selection" value="butterfly" style="display:none" />
    <img src="sc_images/therm114.jpg" height="125" width="123" data-selected="sc_images/therm114.jpg" data-value="rain" />
    <img src="sc_images/therm239.jpg" height="125" width="123" data-seleted="sc_images/therm239.jpg" data-value="moose" />
    <br>
    <img src="sc_images/therm337.jpg" height="125" width="123" data-seleted="sc_images/therm337.jpg" data-value="cow" />
    <img src="sc_images/therm441.jpg" height="125" width="123" data-seleted="sc_images/therm441.jpg" data-value="cardinal" />
</div>

JavaScript

$(document).ready(function() {
    $('#img-bank img').click(function () {

        $('#selected-img').attr('src', $(this).attr('src'));
        // get the buy link from the anchor
        var buy_href = $('#selected-link').attr('href');
        // retain the url
        var buy_url = buy_href.split('?')[0];
        // parse the querystring into keys and values
        var queryString = buy_href.split('?')[1].split('&');

        var myvalues = {};

        // loop through each pair of values and create an object
        for (var pair in queryString) {
            var tmp = queryString[pair].split('=');
            myvalues[tmp[0]] = tmp[1];
        }

        // set the design param to the new image src
        myvalues.design = $(this).attr('src');

        // encode the querystring again and reset the href
        $('#selected-link').attr('href', buy_url + "?" + $.param(myvalues));
        $('#results').html($('#selected-img a').attr('href'));
    });
});