Question

我正试图在我网站的两种不同模式之间来回切换。一种模式是“网格”，另一种模式是“列表”。因此，在网址中，它将是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;
}

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

1 个答案: