1

Есть список из трех элементов '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>

1 ответ 1

2

Я запутался в ваших хитросплетениях, но если нужно поменять местами значения двух переменных, то можете воспользоваться таким синтаксисом:

[lists[0], lists[1]] = [lists[1], lists[0]];

Вроде разобрался:

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);
// Находим индекс объекта массива lists, где свойство idListItem совпадает с ListItem.id
	let index = lists.findIndex(el => el.idListItem == ListItem.id);
// Производим деструктурирующее присваивание, меняем со следующим элементом массива
    [lists[index], lists[index*1 + 1]] = [lists[index*1 + 1], lists[index]];
    console.log(lists);
	}
}
function RaiseItem(){
	let ListItem = this.parentNode;
	let Neighbor = ListItem.previousElementSibling;
	if (Neighbor && Neighbor.className=='li'){
		Neighbor.before(ListItem);
		let index = lists.findIndex(el => el.idListItem == ListItem.id);
// Производим деструктурирующее присваивание, меняем с предыдущим элементов массива
    [lists[index], lists[index*1 - 1]] = [lists[index*1 - 1], lists[index]];
    console.log(lists);
	}
}
        <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>

4
  • Хорошо бы в localstorage это всё добавлять. Но решение хорошее. От меня (+).
    – Denis640Kb
    28 мар 2020 в 20:35
  • Никогда не пользовался localStorage)), да вроде он знает, пишет же "(для дальнейшего сохранения)". Уверенно так пишет)
    – Leonid
    28 мар 2020 в 20:37
  • Спасибо большое. А подскажите зачем Вы пишете index*1? Извините за хитросплетения, действительно много чего тут ни при чем, забыл удалить с реального проэкта
    – Stas
    29 мар 2020 в 8:07
  • Это преобразование строки "1" в число 1. Можно и + добавить или parseInt(index)
    – Leonid
    29 мар 2020 в 8:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.