Проблема изменения объекта на динамически созданном элементе EventListener

Question 1

Я столкнулся с очень интересной проблемой при использовании прослушивателей событий для динамически создаваемых элементов с использованием Vanilla Javascript. Сначала я определю проблему, а затем отправлю код.

Я создаю динамические элементы html с помощью javascript и в процессе создания добавляю прослушиватели событий «щелчок» для каждого вновь созданного объекта. И внутри этого прослушивателя событий я меняю другое свойство ГЛОБАЛЬНОГО объекта. Я имею в виду, что когда вы щелкаете динамически созданный элемент, каждый элемент изменяет разные свойства этого глобального объекта.

Здесь возникает проблема, я динамически выбираю другое свойство глобального объекта. Таким образом, для каждого элемента он изменяет разные свойства глобального объекта. НО, когда я запускаю код, я вижу, что каждый элемент изменяет только последнее свойство глобального объекта. Это означает, что каждый элемент изменяет одно и то же свойство этого объекта, и это последнее свойство объекта. Вот код:

var filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
var productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
  var hdr = document.querySelector("div.content .headers");
  for(var product in productsAndIndexes){
    var inp = document.createElement("input");
    inp.setAttribute("type", "checkbox");
    var filterInd = productsAndIndexes[product];

    inp.addEventListener("click" , (e) => {
      if(e.target.checked){
        filters[ filterInd ] = true;
      }else{
        filters[ filterInd ] = false;
      }
    });

    hdr.appendChild(inp);
  }
}
createEmptyFilter();

Каждый раз, когда я устанавливаю флажок, я получаю filter = {1: false, 4: false, 7: false, 11: false, 8: true}. Но вместо этого каждый флажок должен изменять соответствующую часть объекта.

Приветствуются любые объяснения и решения проблемы (хотя я не 15 человек :)) Спасибо

javascript

0

web-tasarimci 15 Окт 2019 в 19:55

Answer

Проблема в том, что ваша переменная filterInd объявлена с var, что означает, что она имеет область действия , а не блок цикла for. Это означает, что каждая итерация цикла будет перезаписывать одну и ту же переменную , поэтому все обработчики кликов закрываются по одной и той же переменной, а не по уникальным переменным с разными значениями. Вместо этого объявите его с помощью const или let, и обработчик click будет ссылаться на значение, уникальное для итерации цикла.

Поскольку вы используете достаточно современный браузер, чтобы поддерживать =>, вы, вероятно, поддерживаете let и const; в настоящее время действительно нет веских причин использовать var.

const filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
const productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
  const hdr = document.querySelector("div.content .headers");
  for (let product in productsAndIndexes) {
    const inp = document.createElement("input");
    inp.setAttribute("type", "checkbox");
    const filterInd = productsAndIndexes[product];

    inp.addEventListener("click", e => {
      if (e.target.checked) {
        filters[filterInd] = true;
      } else {
        filters[filterInd] = false;
      }
    });

    hdr.appendChild(inp);
  }
}
createEmptyFilter();

0

Jacob 15 Окт 2019 в 17:03

Question 2

Проблема в том, что ваша переменная filterInd объявлена с var, что означает, что она имеет область действия , а не блок цикла for. Это означает, что каждая итерация цикла будет перезаписывать одну и ту же переменную , поэтому все обработчики кликов закрываются по одной и той же переменной, а не по уникальным переменным с разными значениями. Вместо этого объявите его с помощью const или let, и обработчик click будет ссылаться на значение, уникальное для итерации цикла.

Поскольку вы используете достаточно современный браузер, чтобы поддерживать =>, вы, вероятно, поддерживаете let и const; в настоящее время действительно нет веских причин использовать var.

const filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
const productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
  const hdr = document.querySelector("div.content .headers");
  for (let product in productsAndIndexes) {
    const inp = document.createElement("input");
    inp.setAttribute("type", "checkbox");
    const filterInd = productsAndIndexes[product];

    inp.addEventListener("click", e => {
      if (e.target.checked) {
        filters[filterInd] = true;
      } else {
        filters[filterInd] = false;
      }
    });

    hdr.appendChild(inp);
  }
}
createEmptyFilter();

0

Jacob 15 Окт 2019 в 17:03

Проблема изменения объекта на динамически созданном элементе EventListener

1 ответ

Похожие вопросы

Новые вопросы

javascript