来自每个人的事件监听器仅与一个孩子一起工作

时间:2017-11-08 00:39:32

标签: javascript arrays firebase event-handling

好吧所以我想要失去我的头发一直试图解决这个问题并且总是以相同的结果结束,

我想要做的是从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


};

任何帮助赞赏的欢呼声

1 个答案:

答案 0 :(得分:0)

我修复了购买querySelectorAll来选择所有的盒子然后用for循环进入它们并且它工作得很好