每个事件侦听器只适用于一个子级

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

我修复了购买查询选择器全部以选择所有框，然后使用 for 循环循环到它们中，它工作得很好