Question

我有以下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（元素）无法在IE中工作或者在reorderEL函数中的某个问题：

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

}

有没有人有关于此问题的解决方法的建议？

Answer 1

跳出来的东西：

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（）将立即返回，它不会等待动画完成，因此必须提供回调函数。

jQuery .appendTo（元素）在所有IE版本中都不起作用？

1 个答案: