使用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>