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应该用于唯一且与众不同的元素，例如搜索框。只是{em> collection 一部分的元素（例如您的colorbox es）对于集合中的每个项目都不应有单独的ID。对于这种情况，请改用类。为了将颜色 input 字段（当前为#color<num> s）的功能绑定到颜色 display 框中（当前为#colorbox<num> s），，您可以检查输入字段集合中已更改字段的索引，并在颜色框集合中使用相同的索引来更改colorbox。

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

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开始，这将进一步简化代码。

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

1 个答案: