Есть список из трех элементов 'li'. При нажатии на кнопку нужно поменять родительский элемент списка с соседним. Так же информация о положении элементов 'li' обновляется в массиве lists(для дальнейшего сохранения в локальное хранилище). Но почему-то в массиве замена не работает. После нажатия кнопки Up,Down alert выводит обновленное содержимое массива lists.
const divUpButton = document.querySelectorAll('button');
divUpButton.forEach(element => {
if (element.innerText === 'Up') {
element.addEventListener('click', RaiseItem);
} else {
element.addEventListener('click', DropItem);
}
});
let lists = [
{idListItem: 1, name: 'New task1'},
{idListItem: 2, name: 'New task2'},
{idListItem: 3, name: 'New task3'},
];
function DropItem() {
let ListItem = this.parentNode;
let Neighbor = ListItem.nextElementSibling;
if (Neighbor && Neighbor.className == 'li') {
Neighbor.after(ListItem);
for (let item of lists) {
if (item.idListItem == ListItem.id) {
let third = item;
item = lists[lists.indexOf(item) + 1];
lists[lists.indexOf(third) + 1] = third;
alert(JSON.stringify(lists));
break;
}
}
}
}
function RaiseItem() {
let ListItem = this.parentNode;
let Neighbor = ListItem.previousElementSibling;
if (Neighbor && Neighbor.className == 'li') {
Neighbor.before(ListItem);
for (let item of lists) {
if (item.idListItem == ListItem.id) {
let third = item;
item = lists[lists.indexOf(item) - 1];
lists[lists.indexOf(third) - 1] = third;
alert(JSON.stringify(lists));
break;
}
}
}
}
<li class="li" id="1">
<label>New task1</label>
<button>Up</button>
<button>Down</button>
</li>
<li class="li" id="2">
<label>New task2</label>
<button>Up</button>
<button>Down</button>
</li>
<li class="li" id="3">
<label>New task3</label>
<button>Up</button>
<button>Down</button>
</li>