JavaScript给A标签动态添加参数实现筛选功能

2020-11-26 11:32:05

围观(8274)

最近一直在写小说推荐站，今天实现了一个筛选功能，就是经常能看到的筛选：

例如当前页面地址是 www.44l.top/list/1 页面就是一个列表，当点击状态筛选时需要在当前地址加上 status 和他的值，就是这样：

www.44l.top/list/1?status=1

如果光是一个参数很容易能实现，例如直接这样使用 a 标签：

<a href="?status=1">这是状态1</a>
<a href="?status=2">这是状态2</a>

但是参数有多个且要求同时多条件筛选的时候就会有麻烦了：

<a href="?status=1">这是状态1</a>
<a href="?status=2">这是状态2</a>
<a href="?sort=1">这是排序1</a>
<a href="?sort=2">这是排序2</a>

例如淘宝的筛选，可以选择售量排序且包邮等等多个条件。

所以博主写了一段 JS 来实现：

function setUrl(key, value)
{
    let url = window.location.href;
    let feature = url.indexOf('?');
    if (feature >= 0) {
        let feature = url.indexOf(key);
        if (feature >= 0) {
            let feature_more = url.indexOf('&', feature);
            if (feature_more >= 0) {
                url = url.substr(0, feature - 1) + url.substr(feature_more);
                let feature_again = url.indexOf('?');
                if (feature_again < 0) {
                	let feature_position = url.indexOf('&');
                	url = url.substr(0, feature_position) + '?' + url.substr(feature_position + 1);
                }
            } else {
                url = url.substr(0, feature - 1);
            }
        }
        feature = url.indexOf('?');
        if (feature < 0) {
            window.location.href = url + '?' + key + '=' + value;
            return false;
        }

        window.location.href = url + '&' + key + '=' + value;
        return false;
    }

    window.location.href = url + '?' + key + '=' + value;
    return false;
}

这代码一看就知道还能优化，但这不是重点，又不是不能用...

在 a 标签中这样写：

<a href="javascript:void(0)" onclick="setUrl('status', 1)">状态1</a>
<a href="javascript:void(0)" onclick="setUrl('status', 2)">状态2</a>
<a href="javascript:void(0)" onclick="setUrl('sort', 1)">排序1</a>
<a href="javascript:void(0)" onclick="setUrl('sort', 2)">排序2</a>

完整的代码：

<!DOCTYPE html>
<html>
<head>
	<title>不败君 JS 实现多条件筛选</title>
</head>
<body>
	<script type="text/javascript">
		function setUrl(key, value)
		{
		    let url = window.location.href;
		    let feature = url.indexOf('?');
		    if (feature >= 0) {
		        let feature = url.indexOf(key);
		        if (feature >= 0) {
		            let feature_more = url.indexOf('&', feature);
		            if (feature_more >= 0) {
		                url = url.substr(0, feature - 1) + url.substr(feature_more);
		                let feature_again = url.indexOf('?');
		                if (feature_again < 0) {
		                	let feature_position = url.indexOf('&');
		                	url = url.substr(0, feature_position) + '?' + url.substr(feature_position + 1);
		                }
		            } else {
		                url = url.substr(0, feature - 1);
		            }
		        }
		        feature = url.indexOf('?');
		        if (feature < 0) {
		            window.location.href = url + '?' + key + '=' + value;
		            return false;
		        }
		        window.location.href = url + '&' + key + '=' + value;
		        return false;
		    }
		    window.location.href = url + '?' + key + '=' + value;
		    return false;
		}
	</script>

	<a href="javascript:void(0)" onclick="setUrl('status', 1)">状态1</a>
	<a href="javascript:void(0)" onclick="setUrl('status', 2)">状态2</a>
	<a href="javascript:void(0)" onclick="setUrl('sort', 1)">排序1</a>
	<a href="javascript:void(0)" onclick="setUrl('sort', 2)">排序2</a>

</body>
</html>

当然，实现方法肯定不止博主现在写的这种，以前博主就遇到同样的需求但是是通过 Laravel 的路由实现的。

本文地址 : bubaijun.com/page.php?id=226

上一篇文章：开发了一个恐怖悬疑小说推荐网站

下一篇文章：本地网站TTFB速度太慢解决过程

评论:我要评论

发布评论: