3

我已经在互联网和 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 更改为http://blablabla/page.php?orderby=nameASC，然后在第二次单击时，URL 更改为http://blablabla/page。 php?orderby=nameDESC。

那么我的代码有什么问题？

当用户单击按钮时，我不想刷新页面，我只想添加一些（在这种情况下为一个）参数，稍后可以使用 $_GET 但在同一 page.document.URL 上可以更新 +=？ orderby=nameASC 在第一次单击和第二次单击时需要删除 +=?orderby=nameASC 并且 document.URL 更新为 +=?orderby=nameDESC。

4

3 回答 3

4

您的页面更改，因此脚本再次加载。您需要测试您拥有的网址

更新以处理不同的 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);
  });
});

如果要使用浏览器内排序，请使用其中之一

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
  });
});
于 2012-04-10T20:11:54.313 回答
1

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

你最好做这样的事情：

$('.orderby').click(function() {
    if(/ASC$/.test(window.location.href) {
        // switch to DESC
    } else {
        // switch to ASC
    }
}
于 2012-04-10T20:17:26.107 回答
0

根据您的代码，页面将在每次点击时重新加载，库也是如此。在这种情况下，只会执行切换函数中的第一个处理程序。所以它会一直如此ASC。

您可能需要一个简单的单击处理程序，并在处理程序内查找window.location.searchhasASC或DES.

于 2012-04-10T20:18:18.340 回答