Question

基本上，我有两个完全相同的div，我想将它们添加到Bootstrap 4调色板中。硬编码很容易，但是我想以一种动态的方式进行编码，因此从理论上讲，将来的div可以具有调色板，而无需手动编写新代码。

div是（仅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('&nbsp;&nbsp;&nbsp;&nbsp;');
      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('&nbsp;&nbsp;&nbsp;&nbsp;');
      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'中使用resizeArr [i]，由于作用域范围而执行时，我为resizeArr.length。
您可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

上详细了解

Answer 2

您可以使用follow方法，为每个colorPickerArray [i]创建当前名称变量：

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())
        });
    }
});

循环创建动态对象-数组不起作用

编辑

2 个答案: