单击下一个按钮时，气泡分拣观察器交换

Question

我正在创建一个气泡排序可视化器，希望检查两个div的值，并在下一次点击按钮时滑动它们，但无法进行

这是一个冒泡排序可视化工具，它检查第一个和第二个div中的第一个和二个数字并进行比较。如果发现第一个更大，只需在单击按钮时更改div位置。

示例：-用户输入1,2,3,4,5，然后单击创建数组按钮。具有类"的5个div；num"；每个还具有类"；num-1"num-2"；等等

它们都在div"；num保持器"；。

在点击"时；排序btn"num-1"；以及"；num-2"；将被强调，因为这是算法中的前2个比较，后面是"比较"；num-2"；以及"；num-3"；等等

这是一个排序数组，因此所有比较都会显示，但没有元素会改变其位置。

因此，如果数组是2,1,3,4,5。

在第一次比较时；num-1"；以及"；num-2"；将高亮显示，并且它们的顺序属性将相互更改所以他们交换位置。

let createBtn = document.getElementById('create-btn');
let numsArray = [];
var div;
let newArray = [];

createBtn.addEventListener('click', () => {
//creating array of integer.
let data = document.getElementById('numbers_input').value;
let newData = data.split(',');
newArray = newData.map(num => {
return Number(num);
})
//console.log(newArray);
let dataHolder = document.querySelector('.num-holder');
// adding div element to dom 
for (let i = 0; i < newArray.length; i++) {
div = document.createElement('div');
div.innerHTML = newArray[i];
div.className = `num num-${i}`;
// div.style.order = `${newArray[i]}`;
div.setAttribute('data-val', newArray[i]);
dataHolder.appendChild(div);
console.log(div);
}
})
//swapping logic.
let sortBtn = document.getElementById('sort-btn');
for (let i = 0; i < newArray.length - 1; i++) {
for (let j = 0; j < newArray.length - i; j++) {
let sortBtn = document.getElementById('sort-btn');
sortBtn.addEventListener('click', () => {
let num1 = document.querySelector(`.num-${j}`);
let num2 = document.querySelector(`.num-${j+1}`);
console.log(num1, num2);
if (num1.innerHTML > num2.innerHTML) {
num1.style.order = `${newArray[j]}`;
num2.style.order = `${newArray[j + 1]}`;
}
})
}
}

.num-holder {
display: flex;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 10px;
}
.num {
background-color: rgba(227, 130, 130, 0.53);
font-size: 30px;
}

.as-console-wrapper { height: 40px }

<label>Enter numbers seperated by comma here</label>
<input type="text" id="numbers_input">
<button type="button" id="create-btn">Create Array</button>
<div class="num-holder"></div>
<button id="sort-btn" class="sort-btn" type="button">Next</button>
<script src="index.js"></script>

Answer 1

对于生成器函数来说，这似乎是一个很好的例子：生成需要"；交换的"；(实际上是它们的orderCSS属性(。此函数将使用原始数组进行调用，并返回一个迭代器，该迭代器可用于逐步完成排序过程。

"；下一个"；按钮处理程序应该只创建一次，它可以从上面提到的迭代器中获取下一对DOM元素。

这里有一个实现：

function* sorter(array) {
for (let i = 0; i < array.length - 1; i++) {
for (let j = 0; j < array.length - i - 1; j++) {
if (array[j][0] > array[j + 1][0]) {
// yield the two DOM elements that need their order swapped
yield [array[j][1], array[j + 1][1]];
// Swap in array
array.splice(j, 2, array[j + 1], array[j]);
}
}
}
}
const createBtn = document.getElementById('create-btn');
const sortBtn = document.getElementById('sort-btn');
const dataHolder = document.querySelector('.num-holder');
const inputControl = document.getElementById('numbers_input');
let swapIterator; // Initialised when creating array
createBtn.addEventListener('click', () => {
dataHolder.innerHTML = "";
// creating array of integers.
const data = inputControl.value.split(',').map(Number);
// Adding div element to dom, and
// Creating an array of pairs (value & DOM element)
const dataAndDivs = data.map((value, i) => {
const div = document.createElement('div');
div.textContent = value;
div.className = "num";
div.style.order = i;        
dataHolder.appendChild(div);
return [value, div];
});
// Get an iterator that will yield pairs of DOM elements
swapIterator = sorter(dataAndDivs);
});
sortBtn.addEventListener('click', () => {
if (!swapIterator) return; // First an array should be created
const {value, done} = swapIterator.next();
if (done) return; // Already sorted
const [{style: a}, {style: b}] = value;
[a.order, b.order] = [b.order, a.order];
});

.num-holder {
display: flex;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 10px;
}
.num {
background-color: rgba(227, 130, 130, 0.53);
font-size: 30px;
}

<label>Enter numbers seperated by comma here
<input type="text" id="numbers_input" value="20,12,6,5,3,1"></label>
<button type="button" id="create-btn">Create Array</button>
<div class="num-holder"></div>
<button id="sort-btn" class="sort-btn" type="button">Next</button>

Answer 2

我通过创建一个接受步骤并为该步骤排序的函数来修复您的代码。我使用了一个全局变量来跟踪当前步骤。

看看logic函数。

此外，您的实现也很混乱，因为顺序样式与实际类名不同步，我完全删除了您使用的顺序和编号类，而是使用容器DOM中元素的实际顺序。

let createBtn = document.getElementById('create-btn');
let numsArray = [];
var div;
let newArray = [];
let currentJ
let dataHolder = document.querySelector('.num-holder');

createBtn.addEventListener('click', () => {
//reset all
dataHolder.replaceChildren();
newArray = [];
numsArray = [];
currentJ = 1

//creating array of integer.
let data = document.getElementById('numbers_input').value;
let newData = data.split(',');
newArray = newData.map(num => {
return Number(num);
})
// adding div element to dom 
for (let i = 0; i < newArray.length; i++) {
div = document.createElement('div');
div.innerHTML = newArray[i];
div.className = `num`;
dataHolder.appendChild(div);
}
})
//swapping logic.
let logic = (j) => {
let num1 = document.querySelector(`.num-holder :nth-child(${j})`);
let num2 = document.querySelector(`.num-holder :nth-child(${j+1})`);
if (num1 == null || num2 == null) { 
// reached the end of this pass, reset J to go to next pass
currentJ = 1;
//styling comparing items
document.querySelectorAll('.num-holder div').forEach(el => {
el.style.backgroundColor = '';
});
return;
}

if (+num1.innerHTML > +num2.innerHTML) {
dataHolder.insertBefore(num2, num1)
}

//styling comparing items
document.querySelectorAll('.num-holder div').forEach(el => {
el.style.backgroundColor = '';
});
num1.style.backgroundColor = "orange"
num2.style.backgroundColor = "orange"
}

let sortBtn = document.getElementById('sort-btn');
sortBtn.addEventListener('click', () => logic(currentJ++) )

.num-holder {
display: flex;
justify-content: space-between;
margin-top: 50px;
margin-bottom: 10px;
}
.num {
background-color: rgba(227, 130, 130, 0.53);
font-size: 30px; 
padding: 10px;
border-radius: 30px;
}
.num-comparing {
background-color: yellow;
}

<label>Enter numbers seperated by comma here</label>
<input type="text" id="numbers_input" value="5,4,3,2,1">
<button type="button" id="create-btn">Create Array</button>
<div class="num-holder"></div>
<button id="sort-btn" class="sort-btn" type="button">Next</button>