Question

我一直在研究这个细节几个小时，我找不到解决方案。

我正在开发一个房地产网站，它有一个基于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());      
    }

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

Answer 1

错误在您的排序函数asc_sort()和dec_sort()中。他们正在返回true / false - 值，但他们应返回一个数字。数字的符号告诉sort()订单是否应该更改。相反，布尔值true和false被解释为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。

自定义jQuery排序功能无法在iPad上运行（iOS）

1 个答案: