Question

我搜索了互联网和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()将是名称或日期......

我想要完成的是：首次点击按钮，网址会更改为http://blablabla/page.php?orderby=nameASC，然后在第二次点击时，网址会更改为http://blablabla/page.php?orderby=nameDESC。

我的代码出了什么问题？

我不想在用户点击按钮时刷新页面，我只想添加一些（在这种情况下为一个）参数，这些参数可以在以后播放白色$ _GET但在同一页面上。文档.URL可以首次点击时更新whit + =？orderby = nameASC，然后第二次点击+ =？orderby = nameASC需要删除并且document.URL更新whit + =？orderby = nameDESC。

Answer 1

您可以更改页面，以便再次加载脚本。你需要测试你有什么网址

已更新以处理不同的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也会使它工作

<强> UPDATE2

如果你使用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);
  });
});

如果您想使用浏览器内排序，请使用其中一个

http://www.tripwiremagazine.com/2012/02/jquery-filter-sort-plugins.html

并且

$(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
  });
});

Answer 2

导航到新页面（或重新加载当前页面）时，将重置Javascript执行环境。这意味着toggle函数每页只执行一次，因此永远不会使用第二个函数。

你最好做以下事情：

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

Answer 3

根据您的代码，每次点击都会加载~~重新加载~~页面，以及库。在这种情况下，只有toggle函数中的第一个处理程序。所以它始终是ASC。

您可能需要一个简单的点击处理程序，并且在处理程序中查找window.location.search ASC或DES。

第一次和第二次点击时更改网址

3 个答案: