我有一些javascript按照字母顺序a-z或z-a对ul进行排序。它在第一页上运行良好,但如果有多个页面,它会忽略第二页上的列表等。
因此,我不想使用javascript对li进行排序,而是想将选择传递回页面的查询并重新加载
这是我的剧本,现在大部分都是多余的。
var select = document.getElementById('organise');
$('#organise').change(function() {
if(select.value === 'A') {
$('.recipeTable li').sortElements(function(a,b){
var aText = $.text([a]);
var bText = $.text([b]);
return aText.toLowerCase() > bText.toLowerCase() ? 1 : -1;
});
} else {
$('.recipeTable li').sortElements(function(a,b){
var aText = $.text([a]);
var bText = $.text([b]);
return aText.toLowerCase() > bText.toLowerCase() ? -1 : 1;
});
}
});
所以我想检测所选的下拉值(A或Z),并将其传递到url中并重新加载。我被卡住了;-?
富:)
我不确定这是解决问题的最佳方法,也许您应该详细说明分页不起作用的地方。在任何情况下,你都可以通过这样做来实现你需要做的事情(代码注释中的解释):
var queryString = {};
// Get the previous query string with a little help from PHP
// this shouldn't be a problem since you are already using PHP
// for your project.
queryString = <?php json_encode( $_GET ); ?>;
$('#organise').change( function() {
// Set the sort property of the object to the value of the select.
queryString.sort = $(this).val();
// jQuery will help you serialise the JSON object back to
// a perfectly valid query string (you may want to escape
// characters)
newQueryString = $.param( queryString );
// Append the new query string
window.location = newQueryString;
});
此函数将正确检查您是否已经有任何查询字符串并保留该字符串;此外,如果用户多次更改select,则不会添加多个查询字符串。
您可以更改url并使用传递参数
document.location.href = document.location.href + "?arg=" + document.getElementById("organise").value;
如果不想在url
中显示,可以使用localstorage
例如:
function Ascending()
{
$('.recipeTable li').sortElements(function(a,b){
var aText = $.text([a]);
var bText = $.text([b]);
return aText.toLowerCase() > bText.toLowerCase() ? 1 : -1;
});
}
function Descending()
{
$('.recipeTable li').sortElements(function(a,b){
var aText = $.text([a]);
var bText = $.text([b]);
return aText.toLowerCase() > bText.toLowerCase() ? -1 : 1;
});
}
if(localStorage.order=='A')
{
return Ascending();
}
else
{
return Descending();
}
var select=document.getElementById('organise');
$('#organise').change(function() {
if(select.value === 'A') {
localStorage.order=='A';
return Ascending();
} else {
localStorage.order=='Z';
return Descending();
}
});
请参阅上的localStorage
http://www.w3schools.com/html/html5_webstorage.asp