Договоренность в Javascript различных объектов возвращает тот же объект, согласившись на все Ваши элементы

У меня есть недостаток манипулируя договоренностью в Javascript, которого я не смог ни решать, ни объяснять поведение.

Изначально я имею 9 кнопок по отношению к 9 внутри div, пронумерованный от 1. Когда 5 нажимает на кнопку, числа кнопок вокруг должны вертеться в чувстве стрелок часов.

Чтобы это реализовывать я добавляю событие (я не могу использовать jQuery) манипулируя прямо DOM. Я верю в договоренность и добавляю 8 кнопок в соответствующем порядке, клонирую договоренность, в клонировавшую договоренность я удаляю последний элемент и присоединяюсь это в начале (так я симулирую двигать элементы в часовом чувстве), далее распределяю ему стоимость объектов договоренности, клонировавшей в новую договоренность.

Недостаток, который происходит, состоит в том, что он распределяет ему номер 4 во всю стоимость, которая делает крюк в номер 5. Чтобы это проверять, в коде я добавил, что два кода, которые, сначала, показывают мне клонировавшую поменянную договоренность и стоимость, - соответствующие, но во втором цикле for, вновь показав стоимость поменянной договоренности, это точно тот же самый (номер 4), не изменяя договоренности.

Что может происходить?

var button5 = document.getElementById("btn5");
button5.onclick = function() {
  var arrButtons = [];
  
  //Inicialmente el arreglo contendrá los objetos a
  //los botones representados por 1,2,3,6,9,8,7,4
  arrButtons.push(document.getElementById("btn1"));
  arrButtons.push(document.getElementById("btn2"));
  arrButtons.push(document.getElementById("btn3"));
  arrButtons.push(document.getElementById("btn6"));
  arrButtons.push(document.getElementById("btn9"));
  arrButtons.push(document.getElementById("btn8"));
  arrButtons.push(document.getElementById("btn7"));
  arrButtons.push(document.getElementById("btn4"));
  
  //Clono el arreglo inicial.
  var newButtons = arrButtons.slice();
  
  //Permutar en el sentido de las agujas del reloj.
  newButtons.unshift(newButtons.pop());
  
  //Muestra el arreglo permutado correctamente
  //De 1,2,3,6,9,8,7,4 ahora es 4,1,2,3,6,9,8,7 en la primera iteración
  for (var i = 0; i < arrButtons.length; i++) {
    console.log(newButtons[i].innerHTML);
  }
  for (var i = 0; i < arrButtons.length; i++) {
    //Pero ahora solo muestra 4 para cada valor de newButtons[i] en la primera iteración
    console.log(newButtons[i].innerHTML)
    arrButtons[i].innerHTML = newButtons[i].innerHTML;
  }
}
#btns {
  width: 75%
}
#btns .btn {
  width: 30%;
  height: 48px;
  font-size: 24px;
}
<div id="btns">
  <button id="btn1" class="btn">1</button>
  <button id="btn2" class="btn">2</button>
  <button id="btn3" class="btn">3</button>
  <button id="btn4" class="btn">4</button>
  <button id="btn5" class="btn">5</button>
  <button id="btn6" class="btn">6</button>
  <button id="btn7" class="btn">7</button>
  <button id="btn8" class="btn">8</button>
  <button id="btn9" class="btn">9</button>
</div>
2
задан 06.03.2016, 07:08
2 ответа

Проблема - порядок последнего цикла. Когда ты читаешь стоимость элемента, уже он был обновлен в предыдущем шаге и нет у стоимости, что ты думаешь, что у него есть (старый) а различный другой (новый, которого 4).

Мы увидим это шаг за шагом:

  1. Ты распределяешь стоимость первого элемента (4) во второй элемент (1)
  2. Ты распределяешь стоимость второго элемента (сейчас 4) в третий элемент (2)
  3. Ты распределяешь стоимость третьего элемента (сейчас 4) в четвертый элемент (3)
  4. Ты распределяешь стоимость четвертого элемента (сейчас 4) в пятый элемент (6)
  5. ...

И я схватил со всеми элементами array. Это происходит так, потому что, хотя их два arrays различные, элементы - те же самые в обоих arrays (ты мог бы видеть это ссылками на тот же элемент). Так что изменяя innerHTML элемента в array, ты меняешь innerHTML того же элемента на другой array (который находится в другом положении)

Возможное решение состояло бы в том, чтобы пробегать array в обратном чувстве. Таким образом ты не встречаешься с этой проблемой (хотя ты продолжил бы иметь проблему с первым / последним элементом, из-за которого ты нуждался бы в том, чтобы сохранять это в переменной и распределить это в конце концов, как нужна добавочная переменная, когда ты хочешь обменяться стоимостью между двумя переменными).

var button5 = document.getElementById("btn5");
button5.onclick = function() {
  var arrButtons = [];
  //Inicialmente el arreglo contendrá los objetos a
  //los botones representados por 1,2,3,6,9,8,7,4
  arrButtons.push(document.getElementById("btn1"));
  arrButtons.push(document.getElementById("btn2"));
  arrButtons.push(document.getElementById("btn3"));
  arrButtons.push(document.getElementById("btn6"));
  arrButtons.push(document.getElementById("btn9"));
  arrButtons.push(document.getElementById("btn8"));
  arrButtons.push(document.getElementById("btn7"));
  arrButtons.push(document.getElementById("btn4"));
  //Clono el arreglo inicial.
  var newButtons = arrButtons.slice();
  //Permutar en el sentido de las agujas del reloj.
  newButtons.unshift(newButtons.pop());

  // guarda el valor del último valor en una variable auxiliar
  var original = arrButtons[arrButtons.length -1 ].innerHTML;
  // recorre el array en sentido inverso para evitar que todos tengan el mismo valor
  for (var i = arrButtons.length-1; i >= 0; i--) {
    console.log(arrButtons[i].innerHTML + " = " + newButtons[i].innerHTML);
    arrButtons[i].innerHTML = newButtons[i].innerHTML;
  }
  // asigna la variable auxiliar al primer elemento
  arrButtons[0].innerHTML = original;
}
#btns {
  width: 75%
}
#btns .btn {
  width: 30%;
  height: 48px;
  font-size: 24px;
}
<div id="btns">
  <button id="btn1" class="btn">1</button>
  <button id="btn2" class="btn">2</button>
  <button id="btn3" class="btn">3</button>
  <button id="btn4" class="btn">4</button>
  <button id="btn5" class="btn">5</button>
  <button id="btn6" class="btn">6</button>
  <button id="btn7" class="btn">7</button>
  <button id="btn8" class="btn">8</button>
  <button id="btn9" class="btn">9</button>
</div>
0
ответ дан 24.11.2019, 14:46

Как уже я объясняю тебе @AlvaroMontoro aquГ - , у тебя есть проблема с порядком, в котором ты обрабатываешь элементы, в Ваш explicaciГіn aГ±adirГ©, что она raГ-z проблемы состоит в том, что slice делает поверхностную копию договоренности, и следовательно у обеих договоренностей есть те же элементы, но в различном порядке.

Это объясняет, из-за которого на - escriben, и из-за которого обрабатывать их в обратном порядке функционирует (с заплатой первого / последнего элемента).

Сейчас, чтобы предотвращать проблему первого или последний элемент, я предлагаю тебе этот альтернативный подход, который состоит, в установленный заранее порядок хранит контент кнопок в отдельной договоренности segГєn, потом "крутить" порядок обработки и в конце концов вновь устанавливать стоимость в элементах segГєn новый порядок.

var button5 = document.getElementById("btn5")
button5.onclick = function() {
  var order = [1, 2, 3, 6, 9, 8, 7, 4]
      content = []

  order.forEach(function(ix) {
    content.push(document.getElementById("btn" + ix).innerHTML)
  })

  // sentido horario - cambiando solo el orden de procesamiento
  order.push(order.shift())

  // sentido anti-horario
  //order.unshift(order.pop())

  order.forEach(function(ix) {
    document.getElementById("btn" + ix).innerHTML = content.shift()
  })
}
#btns {
  width: 75%
}
#btns .btn {
  width: 30%;
  height: 48px;
  font-size: 24px;
}
<div id="btns">
  <button id="btn1" class="btn">1</button>
  <button id="btn2" class="btn">2</button>
  <button id="btn3" class="btn">3</button>
  <button id="btn4" class="btn">4</button>
  <button id="btn5" class="btn">5</button>
  <button id="btn6" class="btn">6</button>
  <button id="btn7" class="btn">7</button>
  <button id="btn8" class="btn">8</button>
  <button id="btn9" class="btn">9</button>
</div>
1
ответ дан 24.11.2019, 14:46