javascript - 创建 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 应用于独特且不同的元素，例如搜索框。只是集合的一部分的元素，比如你的colorbox es，集合中的每个项目不应该有单独的 ID。对于这种情况，请改用类。为了将颜色输入字段(当前为您的#color<num> s)的功能绑定(bind)到您的颜色显示框(当前为您的#colorbox<num> s)，您可以检查输入字段集合中已更改字段的索引，并更改 colorbox在颜色框集合中具有相同的索引。

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

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

这意味着您有一个单个变量，您可以通过索引访问它，而不是为每个项目使用单独的变量名称，后者是重复的且难以管理。

i + 1是因为数组和数组索引(就像编程中的大多数东西一样)是零索引的，但是你的 .layer<num> s 从 1 开始，而不是 0。

对于 colorinput s，为了少重复自己，将新颜色(无论是输入字段中的值还是默认颜色)放入变量initially，然后设置每个.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所在的类(class)相反，从 0 开始，这将进一步简化代码。