使用复选框中的 window.location.assign 添加多个 GET 参数到 URL

Question

我正在尝试使用 JavaScript 将参数添加到当前 URL 以过滤 WordPress 帖子。示例：http://domain.com/houses/?rooms=1,2&bath=1&yard=yes

我已经使用其中一个参数成功完成了此操作，但我无法理解如何添加多个参数。获得这个的正确方法是什么？

此外，使用 window.location.assign() 是将参数添加到 URL 的正确方法吗？正在使用 AJAX better/safer?

下面是我的代码

HTML

<div id="filter-rooms">
       <ul>
           <li>
               <input type="checkbox" value="1" id="rooms" />1 Room</li>
           <li>
               <input type="checkbox" value="2" id="rooms" />2 Rooms</li>
           <li>
               <input type="checkbox" value="3" id="rooms" />3 Rooms</li>
           <li>
               <input type="checkbox" value="4" id="rooms" />4 Rooms</li>
      </ul>
</div>

<div id="filter-bath">
    <ul>
        <li>
            <input type="checkbox" value="1" id="bath" />1 Bathrooms</li>
        <li>
            <input type="checkbox" value="2" id="bath" />2 Bathrooms</li>
        <li>
            <input type="checkbox" value="3" id="bath" />3 Bathrooms</li>
    </ul>
</div>

<div id="filter-yard">
    <ul>
        <li>
            <input type="radio" name="yard" value="yes" id="yard" />Yes</li>
        <li>
            <input type="radio" name="yard" value="no" id="yard" />No</li>
    </ul>
</div>

JavaScript

$('#filter-rooms').on('change', 'input[type="checkbox"]', function () {

    var $ul = $(this).closest('ul'),
        vals = [];

    $ul.find('input:checked').each(function () {

        vals.push($(this).val());

    });

    vals = vals.join(",");

    window.location.assign('?rooms=' + vals);

});

现在，在上面显示的 JavaScript 中，我设法让 rooms 参数成功工作，但是当我为其他参数复制它时，它用 rooms 参数替换了 URL像这样将它添加到 URL 的末尾 - &bath=1&yard=yes

jsFiddle：http://jsfiddle.net/g9Laforb/1/ （注意：缺少 window.location.assign() 因为 jsFiddle 不允许。）

如有任何建议，我们将不胜感激。

Answer 1

你可以简单地用 window.location.href 如果您有任何值存储在 variable 中，您可以使用 + 符号连接该值。

var somedata = somedata;

window.location.href = "http://www.yourwebsite.com?data1=somedata&data2="+somedata;

Answer 2

首先，不要在多个元素上使用相同的id。参见 Why is it a bad thing to have multiple HTML elements with the same id attribute?

你的问题出在这一行

 window.location.assign('?rooms=' + vals);

您需要动态更新查询字符串。

使用这个方法

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '' + key + "=" + value + '');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

来自 add or update query string parameter

和

等自定义属性

<ul data-type="rooms">

你可以做到

window.location.href = updateQueryStringParameter(window.location.href, $ul.attr('data-type'), vals);

而不是

window.location.assign('?rooms=' + vals);

Answer 3

试试这个：定义变量来存储房间、浴室和院子的选定值，并在输入的每个更改处理程序中相应地创建 url。

roomVal = '';
bathVal = '';
yardVal = '';

$('#filter-rooms').on('change', 'input[type="checkbox"]', function () {
     roomVal = $(this).closest('ul').find('input[type="checkbox"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

$('#filter-bath').on('change', 'input[type="checkbox"]', function () {
     bathVal = $(this).closest('ul').find('input[type="checkbox"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

$('#filter-yard').on('change', 'input[type="radio"]', function () {
     yardVal = $(this).closest('ul').find('input[type="radio"]:checked').map(function(i,v){
        return $(this).val();
    }).get();

    window.location.assign('?rooms=' + roomVal + '&bath='+bathVal+"&yard="+yardVal);
});

JSFiddle Demo

使用复选框中的 window.location.assign 添加多个 GET 参数到 URL

Adding multiple GET Parameters to URL using window.location.assign from checkboxes

javascript

jquery

ajax

wordpress

window.location