1

我有以下 Javascript 代码对我的页面上的 div 进行排序：

$(function() {

    var productContainer = $('.productBoxWrapper');

    function sortByPriceAsc (a,b){
        return Number( jQuery(a).find('.productPriceForSorting').text() - $(b).find('.productPriceForSorting').text() );
    }

    function sortByPriceDesc (a,b){
       return Number( $(b).find('.productPriceForSorting').text() - $(a).find('.productPriceForSorting').text() );
    }

    function sortByTitleAsc (a,b){    
        return $(a).find('.productTitleForSorting').text() > $(b).find('.productTitleForSorting').text() ? 1 : -1;    
    }

    function sortByTitleDesc (a,b){
       return $(b).find('.productTitleForSorting').text() > $(a).find('.productTitleForSorting').text() ? 1 : -1;
    }

    function reorderEl(el){
        var allProductsContainer = $('#product-collection');
        allProductsContainer.html('');   
        el.each(function(){        
            $(this).appendTo(allProductsContainer);        
        });
    }
    function fadeContainer() {
        productContainer.fadeOut('fast');
        productContainer.fadeIn('fast');
    }    

    $('.dk').dropkick({

          change: function () {

            var selectedOptionValue = $('#sortThisCollectionBaby option:selected').val();

            if (selectedOptionValue == 'price-low-to-high')
            {
                reorderEl(productContainer.sort(sortByPriceAsc));
                fadeContainer(); 
            }
            else if (selectedOptionValue == 'price-high-to-low')
            {
                reorderEl(productContainer.sort(sortByPriceDesc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'alphabetically-a-to-z')
            {
                reorderEl(productContainer.sort(sortByTitleAsc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'alphabetically-z-to-a')
            {
                reorderEl(productContainer.sort(sortByTitleDesc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'best-selling')
            {
                window.location.reload( true );  
                fadeContainer();
            }
          } // function    

    }); // dropkick

    });

HTML：

   <ul id="product-collection">

     <div class="productBoxWrapper">        
        <li>
    <div class="product-info">
         <h4>
            <a class="productTitleForSorting" href="my-product">MY PRODUCT</a><br>
         </h4>
         <div class="product-price">
        <span id="listPrice">Retail: $26.99</span>                                                     
            <span style="display:none;" class="productPriceForSorting">895</span>
             <span>Our Price: $8.95</span>
         </div>                   
    </div>              
    </li>
    div class="productBoxBottom">           

    <!-- view product button -->
    <a href="my-product">View</a>                       
    </div>
    </div>

    <!-- I HAVE MORE DIVS FOR OTHER PRODUCTS HERE, SAME HTML AS ABOVE -->

    </ul>

此排序功能在所有浏览器中都运行良好，但在 IE（所有版本的 IE）中根本不行。当我通过更改选择列表选项（调用排序函数）运行脚本时，IE 中的所有内容都消失了。看起来这可能是 jQuery .appentTo(element) 在 IE 中不起作用或 reorderEL 函数中的问题：

function reorderEl(el){
var allProductsContainer = $('#product-collection');
allProductsContainer.html('');   
el.each(function(){        
    $(this).appendTo(allProductsContainer);        
});

}

有没有人对此有解决方法的建议？

4

1 回答 1

2

让我眼前一亮的事情：

function reorderEl(el){
    var allProductsContainer = $('#product-collection');
    allProductsContainer.html('');   
    el.each(function(){        
        $(this).appendTo(allProductsContainer);        
    });
}

可以改写为：

function reorderEl(el){
    $("#product-collection").empty().append(el);
}

此外，您可能应该重做淡入淡出动画：

productContainer.fadeOut("fast", function() {
                                     reorderEl(productContainer.sort(sortByPriceAsc));
                                     productContainer.fadeIn();
                                 });

这样，它会淡出，然后重新排序内容，然后淡入。fadeOut() 将立即返回，它不会等待动画完成，因此必须提供回调函数。

于 2011-07-22T00:07:22.617 回答