替换URL'中的字符串查询;s与Javascript(有条件）

Replacing string queries in URL's with Javascript (conditional)

本文关键字：Javascript 有条件 查询 字符串 URL 替换      更新时间：2023-09-26

我正试图在我的网站中的两种不同模式之间来回切换。一种模式是"网格"，另一种是"列表"。那么在url中它应该是www.example.com/index.php？mode=网格，当您单击特定链接时，它会将模式更改为列表。我的代码只将它从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()"/>

使用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;
}
相关文章：