创建JS函数对动态创建的变量进行操作

Question

我有这样的代码，但在我看来，它非常基本：

    var color1Default = $('.layer1').css('fill');
    $('#colorbox1').css('background-color', color1Default);

    var color2Default = $('.layer2').css('fill');
    $('#colorbox2').css('background-color', color2Default);

    var color3Default = $('.layer3').css('fill');
    $('#colorbox3').css('background-color', color3Default);

我有一个基于回显PHP变量创建的变量。这个变量是一个整数值。此值可以与任何给定的页面加载不同。它来自一个表示需要多少个元素的数据库。html元素是用PHP中的一个循环创建的。layer1、layer2等类引用svg路径。

这就是我试图简单地编写以下代码的方式：

    var numberColors = <?php echo $numColors; ?>;
    var colorDefault[];
    for (var i = 1; i <= numberColors; i++) {
        colorDefault[i] = 'colorDefault' + i;
    }

    for (var i=1; i <= numberColors; i++){
        colorDefault[i] = $('.layer' + i).css('fill');
        $('#colorbox' + i).css('background-color', colorDefault[i]);
    }

我是不是已经接近我该做的事了？你能不能帮助我不仅做好这件事，还能理解将来如何用类似的问题来处理这个问题？

另外，下面的代码也被重复12次，通过硬编码更改数字。我如何重新创建这个函数来动态地操作？

    $('#color1').on('input', function(){
            var newValue = $('#color1').val();

            if (newValue == ''){
                $('.layer1').css('fill', color1Default);
                $('#colorbox1').css('background-color', color1Default);
            } else {
                $('.layer1').css('fill', newValue);
                $('#colorbox1').css('background-color', newValue);
            }
        });

最后的解决方案包括将每种默认颜色的初始加载到每个色盒中：

    var numberColors = <?php echo $numColors; ?>;
    $( document ).ready(function() {

        const defaultColors = Array.from(
            { length: numberColors },
            (_, i) => $('.layer' + (i + 1)).css('fill')
        );

        const colorBoxes = $('.colorbox');
        const colorInputs = $('.colorinput');
        $(colorBoxes).each(function (index) {
            $(this).css('background-color', defaultColors[index]);
        });

        colorInputs.on('input', function() {
            const $this = $(this);
            const index = colorInputs.index($this);
            const newColor = $this.val() || defaultColors[index];
            $('.layer' + (index + 1)).css('fill', newColor);
            colorBoxes.eq(index).css('background-color', newColor);
        });
    });

Answer 1

ID应用于唯一和不同的元素，如搜索框。只是集合的一部分的元素，如您的colorboxes，不应该对集合中的每个项都有单独的in。在这种情况下，使用类代替。为了将颜色输入字段(当前为#color<num>)的功能绑定到彩色显示框(当前为#colorbox<num>)，您可以在输入字段集合中检查已更改字段的索引，并使用同一索引更改colorbox。

例如，输入字段可以使用类名colorinput，颜色框可以使用类名colorbox。在页面加载时，为每个layer的默认颜色创建一个数组。

const defaultColors = Array.from(
  { length: numberColors },
  (_, i) => $('.layer' + (i + 1)).css('fill')
);

这意味着您可以通过索引访问单个变量，而不是对每个项使用单独的变量名，这是重复的，很难管理。

i + 1之所以存在，是因为数组和数组指示符(就像编程中的大多数东西一样)是零索引的，但是.layer<num>的起始值是1，而不是0。

对于colorinput，为了减少重复，首先将新颜色(无论是输入字段中的值还是默认颜色)放入变量中，然后将每个.css设置为该变量：

const colorBoxes = $('.colorbox');
const colorInputs = $('.colorinput');
colorInputs.on('input', function() {
  const $this = $(this);
  const index = colorInputs.index($this);
  const newColor = $this.val() || defaultColors[index];
  $('.layer' + (index + 1)).css('fill', newColor);
  colorBoxes.eq(index).css('background-color', newColor);
});

同样，其中的index + 1是因为集合是零索引的.如果可以的话，您可以考虑使用.layer<num>类，其中num从0开始，这将进一步简化代码。