javascript - 用 Javascript 替换 URL 中的字符串查询（有条件的）

Question

我正在尝试在我的网站中的两种不同模式之间来回切换。一种模式是“网格”，另一种是“列表”。因此，在 url 中，它将是 www.example.com/index.php?mode=grid，当您单击特定链接时，它会将模式更改为列表。我的代码只从 index.php 到其中一个查询一次；

Javascript：

    function gridclick(){
        if(location.href.match(/\?mode=/)){
            var reExp = /mode=\d+/;
            var url = window.location.toString();
            var newUrl = url.replace(reExp, "mode=" + "grid");
        }
        else{


    window.location="index.php?mode=grid";
    }
}

function listclick(){
    if(location.href.match(/\?mode=/)){
        var reExp = /mode=\d+/;
        var url = window.location.toString();
        var newUrl = url.replace(reExp, "mode=" + "list");
    }
    else{
        window.location="index.php?mode=list";
    }
}

的HTML：

<img src="images/grid.png" width="18" height="18" alt="Grid view" onClick="gridclick()"/> 
<img src="images/list.png" alt="List view" width="18" height="18" onClick="listclick()"/>

Answer 1

用于location.search切换查询参数并刷新页面。它还会将您的 javascript 最小化一吨，见下文：

function gridclick(){
    location.search = "mode=grid";
}

function listclick(){
  location.search = "mode=list";
}

更新：

实际上，为了提高效率，我会将您的代码修改为以下内容..

HTML：

<img src="images/grid.png" width="18" height="18" alt="Grid view" onClick="toggleView('grid')"/> 
<img src="images/list.png" alt="List view" width="18" height="18" onClick="toggleView('list')"/>

并且只需一个函数来处理您的视图切换。

Javascript：

function toggleView(view){
  location.search = "mode=" + view;
}