在循环数组中创建动态对象不起作用。

Question

基本上，我有两个完全相同的div，我想添加到他们两个，引导4色调色板。硬编码，它是容易的，但我想要以一种动态的方式，所以理论上说，未来的div可以有调色板，而无需编写新的代码手动。

divs是(只有id不同)：

<div id="myContainer">
      <a class="color-picker">Pick color</a>
      <input class="box" type="text" value="Write about yourself here">
  </div>

<div id="myContainer2">
  <a class="color-picker">Pick color</a>
  <input class="box" type="text" value="Write about yourself here">

​

如果我编写了这段代码，一切都会很好：

var colorPickerArray = [];

$(function(){
    colorPickerArray[0] = $('#myContainer .color-picker');
    colorPickerArray[0].colorpicker();
    colorPickerArray[0].on('changeColor', function(e){
      $('#myContainer .color-picker').empty();
      $('#myContainer .color-picker').append('    ');
      if(e.color==null)
        $(this).val('transparent').css('background-color', '#fff');//tranparent
      else
        $('#myContainer .box').css('color', e.color.toHex())
    });
  });

$(function(){
    colorPickerArray[1] = $('#myContainer2 .color-picker');
    colorPickerArray[1].colorpicker();
    colorPickerArray[1].on('changeColor', function(e){
      $('#myContainer2 .color-picker').empty();
      $('#myContainer2 .color-picker').append('    ');
      if(e.color==null)
        $(this).val('transparent').css('background-color', '#fff');//tranparent
      else
        $('#myContainer2 .box').css('color', e.color.toHex())
    });
  });

它只是重复使用不同的键(0和1)和不同的div(“#myContainer”和“myContainer2”)。但是，当我将这些代码转换为一个循环时，它不起作用：

var resizeArr = ['#myContainer', '#myContainer2'];

$(function(){
    for (var i = 0; i < resizeArr.length; i++) {
        colorPickerArray[i] = $(resizeArr[i] + ' .color-picker');
        colorPickerArray[i].colorpicker();
        colorPickerArray[i].on('changeColor', function(e){
        $(resizeArr[i] + ' .color-picker').empty();
        $(resizeArr[i] + ' .color-picker').append('&nbsp;&nbsp;&nbsp;&nbsp;');
        if(e.color==null)
            $(this).val('transparent').css('background-color', '#fff');//tranparent
        else

            $(resizeArr[i] + ' .box').css('color', e.color.toHex())
    });
    }
  });

实际代码完全相同，这次只是由循环重复。是因为更改i的值会影响事件侦听器吗？我应该做些什么而不是在这里使用数组？

编辑

我确实提出了一个解决方案来创建那些动态调色板，我想分享它可能对谁有帮助。但是，我仍然想知道为什么以前的方法不能工作，只是为了更深入地理解js。

无论如何，这里有一个解决方案：

$('body > div .color-picker').mousedown(function(e) {
    var target = $(e.target);
    for (var i = 0; i < resizeArr.length; i++) {
        if (target.is($(resizeArr[i] + ' .color-picker i'))) {
          var a = $(resizeArr[i] + ' .color-picker');
                a.colorpicker();
                a.on('changeColor', function(e){
                    var b = (a[0].parentElement);
                    b = '#' + b.id 
                $(b + ' .color-picker').empty();
                $(b + ' .color-picker').append('&nbsp;&nbsp;&nbsp;&nbsp;');
                if(e.color==null)
                    $(this).val('transparent').css('background-color', '#fff');//tranparent
                else
                    $(b + ' .color-picker').val(e.color).css('background-color', e.color);
                    $(b + ' .box').css('color', e.color.toHex())
            });

        }
    }
});

Answer 1

我看到的一个问题是，在事件'changeColor‘中使用的是resizeArri，由于作用域的限制，它执行时我是resizeArr.length。

您可以在这里阅读更多关于let https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let的内容。

Answer 2

通过为每个colorPickerArrayi创建当前名称变量，您可以使用以下方法

var colorPickerArray = [];
var resizeArr = ['#myContainer', '#myContainer2'];
$(function(){
    for (var i = 0; i < resizeArr.length; i++) {
        colorPickerArray[i] = $(resizeArr[i] + ' .color-picker');
        colorPickerArray[i].colorpicker();
        colorPickerArray[i].on('changeColor', function(e){
            //console.log(resizeArr[i]); //undefined here!
            var current = $(this).parent(); 
            var name = "#" + current[0].id; //console.log(current[0].id);
            $(name + ' .color-picker').empty();
            $(name + ' .color-picker').append('&nbsp;&nbsp;&nbsp;&nbsp;');
            if(e.color==null)
                $(this).val('transparent').css('background-color', '#fff');//tranparent
            else
                $(name + ' .color-picker').val(e.color).css('background-color', e.color);
                $(name + ' .box').css('color', e.color.toHex())
        });
    }
});