2013-02-03 30 views
1

我已经做了几个小时的关于这个细节的研究,我找不到解决方案。自定义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());  
    } 

希望你们能帮助我。我感谢您的帮助!

回答

0

该错误发生在您的分类功能asc_sort()dec_sort()中。他们返回true/false-值,但他们应该返回一个数字。号码的符号告诉sort()订单是否应该更改。布尔值truefalse改为解释为1和0,并且0表示相等的值。排序算法可能交换或不交换相等的值。

正确的排序功能会是这样的:

// accending sort 
function asc_sort(a, b){ 
    return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text() ? 1 : -1);  
} 

// decending sort 
function dec_sort(a, b){ 
    return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text() ? 1 : -1); 
} 

注意,返回值现在为形式(condition ? 1 : -1),使这些函数总是返回1或-1。