我已经做了几个小时的关于这个细节的研究,我找不到解决方案。自定义jQuery排序功能不适用于iPad(iOS)
我正在一个房地产网站上工作,它有一个基于JQuery的功能,允许您按参数(价格,类型,卧室等)列出属性。 我创建了一个自定义排序功能,启用此功能。
在电脑上它工作的很好,但是当我在iOS上测试它时,它没有。起初,我认为这是jQuery不起作用,但在运行一些简单的测试后,我发现jQuery中的所有东西都可以工作,并且它解析了我需要解析的信息。不工作的部分只是排序功能。
所以我对这个原因有些困惑,我想知道是否有人有一些可能有用的输入。
这些是前端的HTML表单。
<div id="filterControls">
<select onclick=”” id="sortOrd">
<option onclick=”” value="asc">ASC ↑</option>
<option onclick=”” value="desc">DESC ↓</option>
</select>
<form id="filter">
<label>Sort items by: </label>
<input type="button" onclick=”” name="sort" value="type" class="first">
<input type="button" onclick=”” name="sort" value="price" class="active">
<input type="button" onclick=”” name="sort" value="bedrooms">
<input type="button" onclick=”” name="sort" value="location" class="last">
</form>
<div class="clear"></div>
</div>
这是jQuery的部分:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
//alert("I'm alive!");
// CUT THE LENGHT OF THE ADDRESS TEXT
j$('.property_title a').each(function() {
var jthis = j$(this);
jthis.text(jthis.text().slice(0,25));
jthis.append(" ...");
});
// Custom sorting plugin
// SORT BY PRICE WHEN FIRST LOADING
// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());
}
var currentSort = j$('#filter input[class="active"]').val();
//alert(currentSort);
j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');
// USER CAN CHANGE THE SORTING BASE PARAMETER
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
j$('#filter input[type="button"]').on("click", function(e){
// == Sorting Types
// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ order +']').text()) < (j$(a).find('div[data-type='+ order +']').text());
}
// decending sort
function dec_sort(a, b){
return (j$(b).find('div[data-type='+ order +']').text()) > (j$(a).find('div[data-type='+ order +']').text());
}
// deactivate other buttons
j$('#filter input[type="button"]').removeClass("active");
//activate selected button
j$(this).addClass("active");
//e.preventDefault();
// get info from forms
var sorting = j$('#sortOrd').val();
var order = j$(this).val();
//alert (order);
// define type of sorting to do
if (sorting == 'asc'){
j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');
}
if (sorting == 'desc'){
j$("ul#properties li").sort(dec_sort).appendTo('ul#properties');
}
});
// ASCEND OR DESCEND?
j$('#sortOrd').change(function(event){
//alert("Click event on Select has occurred!");
j$("option:selected", j$(this)).each(function(){
var newSorting = (this).value;
//alert (newSorting);
var currentSort = j$('#filter input[class="active"]').val();
//var newSorting = j$(this).val();
// define type of sorting to do
if (newSorting == 'asc'){
j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');
}
if (newSorting == 'desc'){
j$("ul#properties li").sort(dec_sort).appendTo('ul#properties');
}
// == Sorting Types
// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());
}
// decending sort
function dec_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text());
}
});
});
});
做多次测试后,我最好的假设是,这是不正常的部分,因为它不会将它们自动排序时在iOS上加载,因为我认为一切似乎工作正常:
// == Sorting Types
// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());
}
// decending sort
function dec_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text());
}
希望你们能帮助我。我感谢您的帮助!