數組排序動畫

Question

我需要藉助動畫顯示數組排序。我創建一個數組。我用隨機數填充它，同時在頁面上創建一個元素。看起來一切都是如此。但由於某些原因，搜索標籤的內容是不可能的。一個錯誤。

function changeElems(firstElem, secondElem) { 
 
    var firstElemCoords = $(firstElem).offset(); 
 
    var secondElemCoords = $(secondElem).offset(); 
 
    
 
    $(firstElem).animate({ 
 
    left: secondElemCoords.left - firstElemCoords.left + 'px', 
 
    top: secondElemCoords.top + 'px' 
 
    }); 
 

 
    $(secondElem).animate({ 
 
    left: firstElemCoords.left - secondElemCoords.left + 'px', 
 
    top: firstElemCoords.top + 'px' 
 
    }); 
 
} 
 

 
// changeCircle($('.circle')[0], $('.circle')[1]); 
 

 
var array = []; 
 

 
for (var i = 0; i < 5; i++) { 
 
    var number = Math.floor(Math.random() * 50); 
 
    $('body').append($('<div class="circle">').text(number)); 
 
    array.push(number); 
 
} 
 

 
array.sort(function(a, b) { 
 
    if (a < b) changeElems("$('.circle:contains(" + a + ")')", "$('.circle:contains(" + b + ")')"); 
 
    return a - b; 
 
});

.circle { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    color: white; 
 
    float: left; 
 
    margin-right: 5px; 
 
    position: relative; 
 
} 
 

 
.circle:last-child { 
 
    margin-right: 0; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

沙盒：http://jsbin.com/dolucojahi/edit?js,output

Answer 1

您沒有使用jQuery選擇正確，當你通過選擇到changeElem參數，你並不需要包括$（和） 。這應該工作。此外，這將解決您當前的問題，但是您的程序存在缺陷，因爲您正在比較.sort（）函數中的元素。如果你實現自己的排序算法可能會更好。

function changeElems(firstElem, secondElem) { 
 
    var firstElemCoords = $(firstElem).offset(); 
 
    var secondElemCoords = $(secondElem).offset(); 
 
    
 
    $(firstElem).animate({ 
 
    left: secondElemCoords.left - firstElemCoords.left + 'px', 
 
    top: secondElemCoords.top + 'px' 
 
    }); 
 

 
    $(secondElem).animate({ 
 
    left: firstElemCoords.left - secondElemCoords.left + 'px', 
 
    top: firstElemCoords.top + 'px' 
 
    }); 
 
} 
 

 
// changeCircle($('.circle')[0], $('.circle')[1]); 
 

 
var array = []; 
 

 
for (var i = 0; i < 5; i++) { 
 
    var number = Math.floor(Math.random() * 50); 
 
    $('body').append($('<div class="circle">').text(number)); 
 
    array.push(number); 
 
} 
 

 
array.sort(function(a, b) { 
 
    if (a < b) changeElems('.circle:contains(' + a + ')', '.circle:contains(' + b + ')'); 
 
    return a - b; 
 
});

.circle { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    color: white; 
 
    float: left; 
 
    margin-right: 5px; 
 
    position: relative; 
 
} 
 

 
.circle:last-child { 
 
    margin-right: 0; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>