Question

我正在使用JS / jQuery构建可调整的网格，并遇到了一个问题，该问题试图使用for循环以在每个网格项目中显示为目标。

这是我要执行的操作的摘要：

parent

因此，我要遍历每列的循环，向其添加一个ID，然后应用来自适当对象的标题。我尝试了串联，但是不确定如何在另一个串联中进行串联：

var proj01 = { projName: "Project 01",
               projImage: "red"
             };

var proj02 = { projName: "Project 02",
               projImage: "orange"
             };

var proj03 = { projName: "Project 03",
               projImage: "yellow"
             };

function gridItemGen(){

    for(i = 1; i <= gridColumns; i++){
        $("#grid_col_" + i + "").append("<h3>" + proj0[i].projName + "</h3>");
    }

}

但这会由于我要从对象中选择的属性中的点而产生错误。

还有另一种方法可以做到这一点，还是我串联了这个错误？

Answer 1

将它们放入数组中，然后索引到其中：

var projects = [
    { projName: "Project 01",
      projImage: "red"
    },
    { projName: "Project 02",
      projImage: "orange"
    },
    { projName: "Project 03",
      projImage: "yellow"
    }
];

function gridItemGen(){
    for(var i = 1; i <= gridColumns; i++){
        $("#grid_col_" + i + "").append("<h3>" + projects[i - 1].projName + "</h3>");
    }
}

或者，如果愿意，可以使用具有属性名称的非数组对象：

var projects = {
    proj01:  { projName: "Project 01",
               projImage: "red"
             },
    proj02:  { projName: "Project 02",
               projImage: "orange"
             },
    proj03:  { projName: "Project 03",
               projImage: "yellow"
             }
};

function gridItemGen(){
    for(var i = 1; i <= gridColumns; i++){
        $("#grid_col_" + i + "").append("<h3>" + projects["proj0" + i].projName + "</h3>");
    }
}

侧面说明：您的代码已沦为我所谓的The Horror of Implicit Globals的牺牲品。确保在i中声明gridItemGen。我在上面的示例中添加了var。

Answer 2

您不能使用

选择变量名

proj0 + i

proj0将被视为变量，并且未定义。建立数组而不是3个变量比较容易：

var projects = [{ projName: "Project 01",
               projImage: "red"
             },

{ projName: "Project 02",
               projImage: "orange"
             },

{ projName: "Project 03",
               projImage: "yellow"
             }];

然后您可以运行以下代码：

for(var i = 0; i < 3; i++){
        $("#grid_col_" + i + "").append("<h3>" + projects[i].projName + "</h3>");
}

https://codepen.io/anon/pen/QBJNrg?editors=1111

Answer 3

我同意数组可能更有意义，但仅出于参数考虑，您可以引用window之外的全局变量。

var proj01 = {
  projName: "Project 01",
  projImage: "red"
};

var proj02 = {
  projName: "Project 02",
  projImage: "orange"
};

var proj03 = {
  projName: "Project 03",
  projImage: "yellow"
};

for (var i = 1; i < 4; i++) {
  console.log(window['proj0'+ i]);
}

jQuery-如何使用for循环定位特定对象？

3 个答案: