addEventListener（）仅适用于最后一个实例。

11 浏览
0 Comments

addEventListener（）仅适用于最后一个实例。

我正在创建一个简单的颜色选择器，脚本会创建两个选择器实例 - 一个用于改变文本颜色，另一个用于背景颜色（取决于元素所分配的数据属性）。\n循环元素时，事件监听器只会附加到最后创建的颜色选择器实例上。在下面的示例中，背景会改变，但文本颜色不会改变，因为之前定义的事件处理程序会丢失。我找到了这个答案，但无法使我自己的代码工作。\n

var colorPallete = function(id, attr, property, label) {
    var colorsParent = document.getElementById('colorPicker');
    var colorPallete = '' + label + '';
    colorsParent.innerHTML += colorPallete;
    var colors = [
        'blue',
        'red',
        'green'
    ];
    for (var i = 0; i < colors.length; i++) {
        document.getElementById(id).getElementsByClassName('colors')[0].innerHTML += '';
    }
    var allColors = document.getElementById(id).getElementsByClassName('color');
    for (var i = 0; i < allColors.length; i++) {
        allColors[i].addEventListener('click', function() {
            var colorEl  = document.querySelectorAll('[data-color="' + attr + '"]');
            var newColor = this.getAttribute('data-hex');
            for (var i = 0; i < colorEl.length; i++) {
                switch(property) {
                    case 'color'      : colorEl[i].style.color = newColor; break;
                    case 'background' : colorEl[i].style.backgroundColor = newColor; break;
                }
            }
        }, false);
    }
}
new colorPallete('txtColor', 'text', 'color', '更改文本颜色');
new colorPallete('bgColor', 'background', 'background', '更改背景颜色');

\n

#colorPicker .current,
#colorPicker .colors .color  {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 6px;
    cursor: pointer;
}

\n

背景颜色
文本颜色

0

1 答案

0 Comments

当你给colorsParent的.innerHTML赋值时，你删除了所有原来存在的元素，并通过解析赋值的HTML创建了新的元素。所以你为这些元素分配的所有事件监听器都丢失了。

你可以使用.insertAdjacentHTML()来向元素添加新的HTML，而不会删除旧的元素。

var colorPallete = function(id, attr, property, label) {
  var colorsParent = document.getElementById('colorPicker');
  var colorPallete = '
' + label + '
';
  colorsParent.insertAdjacentHTML('beforeend', colorPallete);
  var colors = [
    'blue',
    'red',
    'green'
  ];
  for (var i = 0; i < colors.length; i++) {
    document.getElementById(id).getElementsByClassName('colors')[0].innerHTML += '
';
  }
  var allColors = document.getElementById(id).getElementsByClassName('color');
  for (var i = 0; i < allColors.length; i++) {
    allColors[i].addEventListener('click', function() {
      var colorEl = document.querySelectorAll('[data-color="' + attr + '"]');
      var newColor = this.getAttribute('data-hex');
      for (var i = 0; i < colorEl.length; i++) {
        switch (property) {
          case 'color':
            colorEl[i].style.color = newColor;
            break;
          case 'background':
            colorEl[i].style.backgroundColor = newColor;
            break;
        }
      }
    }, false);
  }
}
new colorPallete('txtColor', 'text', 'color', 'Change text color');
new colorPallete('bgColor', 'background', 'background', 'Change background color');


#colorPicker .current,
#colorPicker .colors .color {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 6px;
  cursor: pointer;
}





Background color


Text color

啊，是的，我没有留意到这点 - 现在完美地工作了，谢谢！

真难捉摸。+1

你是我的救命恩人，非常感谢！这个问题花了我太长时间来解决，希望你有一个美好的一天（哦，太多大写字母了）。

0