如何使用 history.pushState 将查询字符串变量附加到现有 URL？

Question

我目前有一个 URL 显示我的所有项目：
http://localhost:8090/projects.php
当我点击一个时，我可以使用这个简单的代码将一个变量附加到 URL 的末尾：

$(document).ready(function() { 
$(".projects-container").on("click", ".procject-listing", function(){
  history.pushState({}, '', '?info='+$(this).attr("id"));
    $(".project-info").show(); 
          });
        });

URL变为：
http://localhost:8090/projects.php/?info=23
完美运行。问题是，当我在 "info" div 中单击以打开另一张图片时，我希望单击功能将图片 ID 附加到 URL:
的末尾

$(document).ready(function() { 
$(".photo-block").on("click", ".photo", function(){
  history.pushState({}, '', '?photo='+$(this).attr("id"));
    $(".photo-viewer").show(); 
          });
        });

我希望 url 看起来像：
http://localhost:8090/projects.php/?info=23?photo=1
相反，我得到了：
http://localhost:8090/projects.php/?photo=1
有什么方法可以附加到 URL 而不是覆盖 'already-there' 查询字符串变量？
我一直在研究其他问题，但它们似乎没有解决我的问题。
谢谢！！

Answer 1

如果你想要多个查询字符串变量，你需要用 & 连接它们。因此 -> projects.php?firstVar=1&secondVar=2.

或者，您也可以使用散列 #，它不需要您推送状态，而只是将您的图片包裹在像 projects.php/?info=23#photo1 这样的普通锚点中。当用户点击 img

时，url 会改变

Answer 2

给你老板，解析当前URL查询字符串，创建一个变量，然后将其添加到等式中。它是动态的，因为它的内容基于点击。

$(document).ready(function() { 
  $(".photo-block").on("click", ".photo", function(){
    function query_string(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
              if(pair[0] == variable){
                  return pair[1];
                  }}return(false);} 
     history.pushState({}, '','?info=' + info +'?photo='+$(this).attr("id"));
     $(".photo-viewer").show(); 
          });
        });

如何使用 history.pushState 将查询字符串变量附加到现有 URL？

How to append query string variable to existing URL with history.pushState?

javascript

jquery

html

query-string

pushstate