如何使用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();           });        });我希望得到一个看起来像这样的网址：http://localhost:8090/projects.php/?info=23?photo=1相反，我得到了：http://localhost:8090/projects.php/?photo=1有没有办法附加到网址而不是覆盖“已经存在”的查询字符串变量？我一直在研究其他问题，但它们似乎没有解决我的问题。谢谢！！

Answer 1

老板，解析当前的 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(); 

          });

        });

Answer 2

如果您想要多个查询字符串变量，则需要使用&. 因此 -> projects.php?firstVar=1&secondVar=2。

或者，您也可以使用哈希#，它不需要您推送状态，而只需将您的图片包装在普通锚点中，例如projects.php/?info=23#photo1. 当用户点击img时url会改变