Question

我无法理解为什么我的脚本在Firefox和Chrome中正常工作，而不是Safari。任何人都可以通过编码方式看到可能的标准语言问题吗？

function querysort(thisObj) {

  var type = thisObj.id;

  $('.sort-option').removeClass('selected');
  $('#'+type).addClass('selected');

  var $allRest = $('.results-entry');

  if (type === 'sort-open') {
    $allRest.hide();
    var $openRest = $allRest.filter('[data-status="open"]');
    if ($openRest.length === 0) {
        $("#no-open-shops").show();
    } else {
        $openRest.show();
    }

  } else {
    $allRest.show();
    $('#no-open-shops').hide();

    var $wrapper = $('#hit_list');
    $wrapper.find('.results-entry').sort(function (a, b) {
        if (type === 'sort-dist') {
            return +a.dataset.distance - +b.dataset.distance;
        } else if (type === 'sort-name') {
            return $(a).attr('data-cart-name') < $(b).attr('data-cart-name');
        } else if (type === 'sort-pop') {
            return $(a).attr('data-rating') < $(b).attr('data-rating');
        } else if (type === 'sort-new') {
            return $(a).attr('data-date') < $(b).attr('data-date');
        }
    }).appendTo( $wrapper );
  }
}

让我添加一些关于我期望的行为的详细信息（以及我在Firefox和Chrome上正确看到的）：我有4个按钮可以在div中定义：

  <div id="hit_list">
            <ul class="sort-nav">
              <li></li>
              <li id="sort-dist" class="sort-option">By Distance</li>
              <li id="sort-open" class="sort-option">Oopen now</li>
              <li id="sort-name" class="sort-option">By name</li>
              <li id="sort-pop" class="sort-option selected">By popularity</li>
              <li id="sort-new" class="sort-option">Most recent</li>
            </ul>
          <div id="no-open-shops">No restaurant is open</div>

Answer 1

（代表OP发布）。

以下代码的工作原理是sort应该返回一个实数（参见this answer。这是通过使用以下代码版本实现的：

function querysort(thisObj) {

var type = thisObj.id;

$('.sort-option').removeClass('selected');
$('#'+type).addClass('selected');

var $allRest = $('.results-entry');

if (type === 'sort-open') {
    $allRest.hide();
    var $openRest = $allRest.filter('[data-status="open"]');
    if ($openRest.length === 0) {
        $("#no-open-shops").show();
    } else {
        $openRest.show();
    }

} else {
    $allRest.show();
    $('#no-open-shops').hide();

    var $wrapper = $('#hit_list');
    $wrapper.find('.results-entry').sort(function (a, b) {
        if (type === 'sort-dist') {

            return (+a.dataset.distance > +b.dataset.distance) ? 1 : (+a.dataset.distance < +b.dataset.distance) ? -1 : 0;
        } else if (type === 'sort-name') {

            return ($(a).attr('data-cart-name') > $(b).attr('data-cart-name')) ? 1 : ($(a).attr('data-cart-name') < $(b).attr('data-cart-name')) ? -1 : 0;
        } else if (type === 'sort-pop') {

            return ($(a).attr('data-rating') < $(b).attr('data-rating')) ? 1 : ($(a).attr('data-rating') > $(b).attr('data-rating')) ? -1 : 0;
        } else if (type === 'sort-new') {

            return ($(a).attr('data-date') < $(b).attr('data-date')) ? 1 : ($(a).attr('data-date') > $(b).attr('data-date')) ? -1 : 0;
        }
    }).appendTo( $wrapper );
}
}

JS排序适用于Firefox但不适用于Safari

1 个答案: