来自每个对象的事件侦听器只有一个孩子

Question

好吧，所以我很想脱掉头发，整天都在试图解决这个问题，并且总是以同样的结果结束

我想做的是从firebase获取数据，并且工作正常，问题是我想单击大框，然后从被单击的框中获取按钮的值，它与第一个框一起使用，而从不与任何其他框一起使用。

function gotData(data) {

  // got data array
  all = data.val();
  var keys = Object.keys(all);
  if (keys === 'null') { return null;}
  for (var i = 0; i < keys.length; i++) {
    var k = keys[i] ;
    var color1 = all[k].color1;
    var color2 = all[k].color2;
    var color3 = all[k].color3;
    var color4 = all[k].color4;

    var output = '<div id="ProBox"><div id="myBox" class="bigBox animated fadeIn">'+
                      '<div class="top">'+
                        '<div class="box box1" style="background-color: '+ color1 +' "><button id="btnColor1" value="'+ color1 +'"></button></div>'+
                        '<div class="box box2" style="background-color: '+ color2 +' "><button id="btnColor2" value="'+ color2 +'"></button></div>'+
                      '</div>'+
                      '<div class="bootom">'+
                        '<div class="box box3" style="background-color: '+ color3 +' "><button id="btnColor3" value="'+ color3 +'"></button></div>'+
                        '<div class="box box4" style="background-color: '+ color4 +' "><button id="btnColor4" value="'+ color4 +'"></button></div>'+
                      '</div>'+
                    '</div></div>';

    body.innerHTML += output;

    var ProBox = document.getElementById('ProBox');

    Array.prototype.forEach.call(ProBox.children , function(box){
        box.addEventListener('click' , function(){
          console.log(this);
        })
    });

  }
  // end data array


};

任何帮助表示赞赏

Answer 1

我修复了buy querySelectorAll以选择所有框，然后使用for循环循环进入它们，效果很好