Javascript 在第一次和第二次单击时更改URL

我在internet和stackoverflow上搜索了如何触发第二次单击功能，我发现：

$('.elementclass').toggle(
function(){
   //on odd
    },
function(){
   //on even
}); 

太完美了。现在，根据这一点，我试图更改我的文档的URL，但有些东西不起作用。这是我的密码：

$('.orderby').toggle(
function(){
      document.location.href+='?orderby='+$(this).val()+'ASC';
},
function(){
      document.location.href+='?orderby='+$(this).val()+'DESC';
});

其中，

$（this）.val（）

将类似于名称或日期

我想完成的是：第一次点击按钮，URL变为，然后第二次点击，URL变为

那么我的代码怎么了

---

当用户单击按钮时，我不想刷新页面，我只想添加一些（在本例中为一个）可以稍后使用whit$\u GET但在同一页面上的参数。document.URL可以在第一次单击和第二次单击时更新whit+=？orderby=namesc+=？orderby=namesc需要删除，document.URL更新whit+=？orderby=namesc。

您的页面会更改，以便再次加载脚本。 您需要测试您拥有的url

更新以处理不同的orderby值

$(document).ready(function() {
  $('.orderby').click(
    function(){
     var srch = location.search;
     if (srch) srch = srch.substring(1); // lose the ?
     var val = $(this).val();

     if (srch.indexOf(val+"ASC")!=-1)
       srch = srch.replace(val+"ASC",val+"DESC");
     else if (srch.indexOf(val+"DESC")!=-1)
       srch = srch.replace(val+"DESC",val+"ASC");
       else if (!srch || srch.indexOf("orderby")!=-1) {
         // if srch was empty or contained another value than this'
         srch ='orderby='+$(this).val()+'ASC'; 
       }
     var loc = (location.search)?location.href.split("?")[0]:location.href;
     window.location = loc + "?"+srch;
  });
});

PS:document.location.href多年前就被弃用了。改为使用document.URL或window.location.href

PPS：正如MilkyWayJoe正确指出的——为什么要麻烦呢——如果页面是从服务器加载到当前页面，而不是加载到iframe或ajaxed中，那么在服务器上设置按钮的值，并有一个正常的链接——这将使它即使在JS关闭时也能工作

---

更新2

如果你使用AJAX，你想做一些事情，比如

$(document).ready(function() {
  if (location.hash.indexOf(....) {
    // find the element which is mentioned in the orderby and click it
    var $elem = ....
    $elem.click(); // or trigger
  }

  $('.orderby').toggle(
    function(){
      $("#someLabel").html("DESC");
      var orderBy = $(this).val()+'ASC';
      location.hash = orderBy; // now URL will be ...#nameASC
      $("#content").load('soneserverprocess?orderby='+orderBy);
  },
  function(){
      $("#someLabel").html("ASC");
      var orderBy = $(this).val()+'DESC';
      location.hash = orderBy; // now URL will be ...#nameDESC
      $("#content").load('someserverprocess?orderby='+orderBy);
  });
});

如果要在浏览器中使用排序，请使用以下选项之一

而且

$(document).ready(function() {
  if (location.hash.indexOf(....) {
    // find the element which is mentioned in the orderby and click it
    var $elem = ....
    $elem.click(); // or trigger
  }

  $('.orderby').toggle(
    function(){
      $("#someLabel").html("DESC");
      var orderBy = $(this).val()+'ASC';
      location.hash = orderBy; // now URL will be ...#nameASC
      $("#content").sort(....); // depending on plugin
    },
    function(){
      $("#someLabel").html("ASC");
      var orderBy = $(this).val()+'DESC';
      location.hash = orderBy; // now URL will be ...#nameDESC
      $("#content").sort(....); // depending on plugin
  });
});

---

当您导航到新页面（或重新加载当前页面）时，Javascript执行环境将重置。这意味着

toggle

函数每页只执行一次，因此第二个函数永远不会使用

你最好做些像这样的事情：

$('.orderby').click(function() {
    if(/ASC$/.test(window.location.href) {
        // switch to DESC
    } else {
        // switch to ASC
    }
}

---

根据您的代码，页面将被重新加载，并在每次单击时加载库。在这种情况下，始终只执行toggle函数中的第一个处理程序。所以它总是

ASC

---

您可能需要一个简单的单击处理程序，并在处理程序中查找

窗口.location.search

has

ASC

或

DES

窗口.location？另外，如果您在第一次单击时更改了URL，您的浏览器将离开页面，第二次回调将不会执行。这是用于排序的吗？说真的？那个“MilkyWayJoe”怎么了？如果排序是在一台服务器上完成的，那么完全可以接受。那么，如果你想点击服务器，为什么还要在JS中遇到这些麻烦呢？我的意思是我喜欢客户端脚本，但有时没有意义。为什么不将普通HTML标记与适当的查询一起使用，并在服务器上处理排序顺序的切换？然后用另一个查询字符串回显链接。。。认真地如果不是异步执行，只需正常执行即可。您可以更改服务器上的按钮以反映排序的状态。哦，好吧。至少代码会准备好，以便将结果转换为：）是的，正如我发布的那样。它是document.URL或window.location.href，而不是document.location.href（已弃用），我以前从未见过使用document.location；现在我知道为什么了。更正为符合标准。我不确定我是否理解。什么是/ASC$/和需要初始化的whit值。我不想在用户单击按钮时刷新页面，我只想添加一些（在本例中是一个）参数，这些参数可以稍后在同一页面上获取whit$\u GET。

/ASC$/

是一个用于测试URL是否以ASC结尾的参数。正如我在@mplungjan的回答中所评论的，您几乎肯定希望Ajax解决这个问题。如果你不懂Ajax，请学习它是如何工作的，因为学习它将极大地改变你对Web应用程序架构的看法。如果投票人能留下评论，我将不胜感激，这样我就可以从错误中吸取教训。。简单的否决并没有真正的帮助。否决投票的目的是改进答案或指出问题……也许是因为它更多的是一种评论而不是一种解决方案。。。我也因为没有明显的和没有评论而被否决reason@mplungjan第二部分是答案的线索。。tbh我在我的大部分答案中发布了代码和演示。。不幸的是，我不得不把它放在中间，而当我回来的时候，有3张选票。否决一个不好的答案是可以的，但留下评论会让我们真正理解原因并纠正答案。大多数情况下，如果它复制了其他人的答案，我会将其删除。我不想在用户单击按钮时刷新页面，我只想添加一些（在本例中是一个）参数，这些参数可以稍后在同一页面上获取。顺便提一下，如果我第一次单击“添加我”时，您的代码就不起作用了？第二次点击他又给我加了一个？因此，URL在两次单击后变为？？。每当我按下按钮（奇数和偶数点击）时，我都希望能完成这项工作。更改页面位置必然会导致页面刷新（更改哈希的特殊情况除外，这里不适用）。您需要的是一个Ajax调用，该调用使用从服务器获取的数据重写您的表：。@George02-按照您的措辞，解决方案是重新加载页面。如果你想使用Ajax，那么解决方案就完全不同了@mplungjan如果不使用Ajax，就无法向URL添加参数并重新加载页面？@mplungajan现在真是太棒了，我不需要使用哈希！非常感谢。你是我最好的！