Question

我有一个带有数组的url作为参数。例如：

test.dev/orders?filter[]=temp&filter[]=placed

我想创建一个js函数，可以切换数组的内容并在修改后重定向。

例如，如果我调用函数toggleFilter('temp')，我希望js重定向到test.dev/orders?filter[]=placed。

但如果我致电toggleFilter('processed')，我希望将js重定向到test.dev/orders?filter[]=temp&filter[]=placed&filter[]=processed。

我该如何制作这样的功能？提前谢谢！

Answer 1

该函数需要获取当前查询字符串，将其分解，然后根据参数重新组合它。

document.location.search - 足够轻松地为您提供查询字符串。

String.split - 让你把它分解成各个部分。

arguments - 让我们使用此参数代替已定义的参数，以便您可以根据需要传递尽可能多的（或很少的）过滤器。

从那里，它只是解释参数以组装新的查询字符串......

function toggleFilter() {
    var queryString = document.location.search;
    queryString = queryString.substring(1); // Get rid of the initial '?'

    // Break it into individual parts and remove the 'filter[]=' leaving just the values
    var queryStringSplit = queryString.split('&');
    var values = [];
    for (var qss = 0; qss < queryStringSplit.length; qss++) {
        var value = queryStringSplit[qss];
        value = value.split('=')[1];

        // This will remove any "blank" values (like 'filter[]=&...")
        if (value)
            values.push(value);
    }

    // Add / remove values in arguments
    for (var a = 0; a < arguments.length; a++) {
        var arg = arguments[a];
        var index = values.indexOf(arg);
        if (index == -1)
            values.push(arg);
        else
            values.splice(index, 1);
    }

    // Re-assemble the new query string
    queryString = ''; // Default to blank
    if (values.length)
        queryString = 'filter[]=' + values.join('&filter[]=');

    // Redirect to new location
    location.search = queryString;
}

话虽如此，我认为如果你想让它成为任何一种可重用的东西，我会称它为toggleQueryString并修改逻辑以将第一个参数解释为queryString值的名称来切换（所以你可以做“filter []”以外的事情，我不会设置位置，而是返回一个你可以做任何你想做的查询字符串值。但是这个功能应该可以解决问题。

Answer 2

function toggleFilter(url, key) {
    var result;
    if(url.indexOf('filter[]=' + key) > -1)
        result = url.replace('filter[]=' + key + '&', '').replace('filter[]=' + key, '');
    else
        result = url + (url.indexOf('?') > -1 ? '&' : '?') + 'filter[]=' + key;
    result = result.indexOf('?') == result.length - 1 ? 
        result.substring(0, result.length - 1) : 
        result;
    return result;
    // or if you want to redirect just write window.location.href = result;
}

javascript修改url参数数组

2 个答案: