Создание динамических объектов в цикле - массив не работает - PullRequest
Новая
       9

Создание динамических объектов в цикле - массив не работает

0 голосов
/ 10 сентября 2018

По сути, у меня есть два абсолютно одинаковых элемента div, и я хочу добавить к ним обоим цветовую палитру Bootstrap 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('&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())
            });

        }
    }
});

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вы можете использовать метод 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())
        });
    }
});
0 голосов
/ 10 сентября 2018

одна проблема, которую я вижу, это то, что вы используете resizeArr [i] в ​​событии 'changeColor', i это resizeArr.length, когда оно выполняется из-за области видимости.
Вы можете прочитать больше о let здесь https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

...