时间戳

首页 > 解决方案 > 是否可以交换 div 的两个孩子的位置并为其设置动画？

javascript - 是否可以交换 div 的两个孩子的位置并为其设置动画？

问题描述

所以我正在对一个数组的元素进行冒泡排序，该数组的数据来自一个文本区域。我从 textarea 中获取数据，将其放入一个数组中，然后将数组的每个元素附加到函数中调用的 divchars中appendThem()。那么，有什么方法可以动画化排序过程中发生的元素之间的交换？我之所以使用，是var array = new Array()因为bubbleSort()函数是在另一个文件中定义的，我想array全局访问。我只是在这里交换 innerHTML。我想不出办法交换孩子。是否可以交换孩子并制作相同的动画？

var board = document.getElementsByClassName("chars")[0];
var array= new Array();

function appendthem(){
    var input = document.getElementById("charInput").value; 
    input = input.replace(/ /g,'')
    array = input.split(",");


    while (board.firstChild) {
        board.removeChild(board.lastChild);
    }  //Removing any existing children from old data when new data is entered

    for(var i=0; i<array.length; i++){
        var elem = document.createElement("p");
        elem.style.marginLeft="20px";
        var textnode  = document.createTextNode(array[i]);
        elem.appendChild(textnode);
        board.appendChild(elem);    
    }
        bubbleSort();
}

function bubbleSort(){
    for(var m=0; m<array.length; m++){
        isSwapped =false;

        for(var j=0; j<array.length-m-1; j++){
            if(  Number(board.children[j].innerHTML) > Number(board.children[j+1].innerHTML) ){
                    var temp = board.children[j].innerHTML;
                    board.children[j].innerHTML = board.children[j+1].innerHTML;    
                    board.children[j+1].innerHTML = temp;
                isSwapped = true;
            }
        }

      if( !isSwapped ){
          break;
      }
    }
}

charsdiv的 CSS ，如果需要：

.chars{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 0px;
}

更新：应要求添加了 HTML：

<html>
    <head>
       
        <link rel="stylesheet" href="index.css"/>
        <script type="text/javascript" src="algorithms/bubble.js"></script>
    </head>

<body>
<div class="container">
        
        <div class="textbox">
            <textarea id="charInput" placeholder="Enter numbers or letters separated by commas."></textarea>
        </div>

        <div class="board">
            <div class="chars"></div>
        </div>

<button class="submitBtn" onclick="appendthem()" >Sort!</button>

</div>


<script type="text/javascript" src="index.js"></script>
</body>
</html>

标签： javascripthtmlcssarrays

解决方案

推荐阅读