动态选择特定对象和键值进行迭代，doc.write to div [英] Dynamically selecting specific object and key value to iterate over, doc.write to div
问题描述
我是一名受过 Teamtreehouse 教育的新手，试图创建(我认为的)一个简单的 JavaScript 函数，在解析 URL 以下拉并从 URL 中的必要字符串创建变量后，我将使用它用于创建动态更新脚本的标识符，在本例中，该脚本会将大学橄榄球队的日程安排(比赛日期和对手)传送到 HTML 中的 div.
I'm a Teamtreehouse-educated newbie trying to create (what I thought) was a simple JavaScript function that, after parsing the URL to pull down and create a variable from a necessary string in the URL, I would then use that identifier to create a dynamically updating script which would, in this case, deliver a college football team's schedule (date of game and opponent) to a div in the HTML.
例如/teams/fsu.html"将被解析为fsu"和html"，然后我会使用字符串fsu"来确保我的函数知道"它们在哪个页面上，从而知道哪个页面对象/数组/等.交付.我可以将每个日期和游戏连接起来，但实际上我无法将它们正确地放到页面上.这是我的代码示例:
For instance "/teams/fsu.html" would be parsed to "fsu" and "html", and I'd then take the string "fsu" to ensure my functions "know" which page their on and thus which objects/arrays/etc. to deliver. I'm able to concatenate the date and game for each, but I cannot actually get them properly to the page. Here's a sample my of code:
// This objects contains each game day of each week of the college football season.
var gameDays = {
week1: ["Thursday, August 28th",
"Friday, August 29th",
"Saturday, August 30th",
"Sunday, August 31st",
"Monday, September 1st"],
week2: ["Thursday, September 4th",
"Friday, September 5th",
"Saturday, September 6th"],
week3: ["Thursday, September 11th",
"Friday, September 12th",
"Saturday, September 13th",
"Sunday, September 14th"],
week4: ["Thursday, September 18th",
"Friday, September 19th",
"Saturday, September 20th"],
week5: ["Thursday, September 25th",
"Friday, September 26th",
"Saturday, September 27th"],
week6: ["Thursday, October 2nd",
"Friday, October 3rd",
"Saturday, October 4th"],
week7: ["Thursday, October 9th",
"Friday, October 10th",
"Saturday, October 11th",
"Sunday, October 12th"],
week8: ["Tuesday, October 14th",
"Thursday, October 16th",
"Friday, October 17th",
"Saturday, October 18th"],
week9: ["Tuesday, October 21st",
"Thursday, October 23rd",
"Friday, October 24th",
"Saturday, October 25th",
"Sunday, October 26th"],
week10: ["Thursday, October 30th",
"Friday, October 31st",
"Saturday, November 1st"],
week11: ["Tuesday, November 4th",
"Wednesday, November 5th",
"Thursday, November 6th",
"Friday, November 7th",
"Saturday, November 8th"],
week12: ["Tuesday, November 11th",
"Wednesday, November 12th",
"Thursday, November 13th",
"Friday, November 14th",
"Saturday, November 15th"],
week13: ["Tuesday, November 18th",
"Wednesday, November 19th",
"Thursday, November 20th",
"Friday, November 21st",
"Saturday, November 22nd",
"Sunday, November 23rd"],
week14: ["Tuesday, November 25th",
"Thursday, November 27th",
"Friday, November 28th",
"Saturday, November 29th"],
week15: ["Thursday, December 4th",
"Saturday, December 6th"],
week16: ["Saturday, December 13th"]
}
// I've created objects for each Top 25 team, but here's just three for this example
// #1:
var fsu = {
conf: "ACC",
sched:
[gameDays.week1[2] + " vs Oklahoma State",
gameDays.week2[2] + " vs Citadel",
gameDays.week4[2] + " vs #16 Clemson",
gameDays.week5[2] + " at North Carolina State",
gameDays.week6[2] + " vs Wake Forest",
gameDays.week7[2] + " at Syracuse",
gameDays.week8[3] + " vs #17 Notre Dame",
gameDays.week10[0] + " at Louisville",
gameDays.week11[4] + " vs Virginia",
gameDays.week12[4] + " at Miami",
gameDays.week13[4] + " vs Boston College",
gameDays.week14[3] + " vs Florida"]
}
// #2:
var bama = {
conf: "SEC",
sched:
[gameDays.week1[2] + " vs West Virginia",
gameDays.week2[2] + " vs Florida International",
gameDays.week3[2] + " vs Southern Mississippi",
gameDays.week4[2] + " vs Florida",
gameDays.week6[2] + " @ #18 Ole Miss",
gameDays.week7[2] + " at Arkansas",
gameDays.week8[3] + " vs #21 Texas A&M",
gameDays.week9[3] + " at Tennessee",
gameDays.week11[4] + " @ #13 LSU",
gameDays.week12[4] + " vs Mississippi State",
gameDays.week13[4] + " vs Western Carolina",
gameDays.week14[3] + " vs #6 Auburn"]
}
// #3:
var oregon = {
conf: "PAC12",
sched:
[gameDays.week1[2] + " vs South Dakota",
gameDays.week2[2] + " vs #8 Michigan State",
gameDays.week3[2] + " vs Wyoming",
gameDays.week4[2] + " at Washington State",
gameDays.week6[0] + " vs Arizona",
gameDays.week7[2] + " at #7 UCLA",
gameDays.week8[3] + " vs #25 Washington",
gameDays.week9[2] + " at California",
gameDays.week10[2] + " vs #11 Stanford",
gameDays.week11[4] + " at Utah",
gameDays.week13[4] + " vs Colorado",
gameDays.week14[3] + " at Oregon State"]
}
// And here's the the JS I'm using to try and bring each schedule to the page:
// This parses the URL and grabs the proper identifier for me, i.e. "fsu"
function parseURL() {
var match = window.location.href.match(/(\w+).html$/);
if (match) {
return match[1];
}
return null;
}
// This is what I was _hoping_ would create the proper variable to call for the needed
// object and key value, for instance, "fsu.sched", which would then return their schedule:
var teamSched = parseURL() + ".sched";
// This is the scripting I was then using as a test to simply get "teamSched"
// value to the page.
function testParse() {
document.getElementById('scheduleText').innerHTML;
document.write(teamSched);
}
// And this script ties it all together and executes it.
var team = parseURL();
if (teamSched) {
testParse(teamSched);
}
所以我在 HTML 的输出中得到的只是文本字符串fsu.sched"，而不是fsu.sched"的实际对象键值.
So what I'm getting in the output in the HTML is just the string of text "fsu.sched", not the actually object key values for "fsu.sched".
我认为我因为没有对对象使用this"语句而搞砸了，但我认为，作为一个新手，显然，在 JS 文件中每个变量都可见，这对我来说很清楚围绕这一切编写代码.
I'm thinking that I've screwed up by not using "this" statements for objects, but I thought that, as a novice obviously, with each variable visible in the JS file, it'd make it clear for me to write code around it all.
我真诚地感谢您可以为这个令人难以置信的难堪的新秀提供任何帮助和见解！
I would sincerely appreciate any help and insight you can provide this incredibly stumped rookie!
推荐答案
您最初的目的是创建一个您想用作变量的字符串.
What you had originally was creating a String that you wanted to use as a variable.
如果您以与 gameDays 相同的方式将您的团队数据包装在一个对象中，那么您拥有的代码将几乎可以正常工作.因此，例如使用 fsu:
The code you have will work pretty much as-is if you wrap your team data in an object the same way you did with gameDays. So for example with fsu:
teams = {
fsu : {
conf: "ACC",
sched:
[gameDays.week1[2] + " vs Oklahoma State",
gameDays.week2[2] + " vs Citadel",
gameDays.week4[2] + " vs #16 Clemson",
gameDays.week5[2] + " at North Carolina State",
gameDays.week6[2] + " vs Wake Forest",
gameDays.week7[2] + " at Syracuse",
gameDays.week8[3] + " vs #17 Notre Dame",
gameDays.week10[0] + " at Louisville",
gameDays.week11[4] + " vs Virginia",
gameDays.week12[4] + " at Miami",
gameDays.week13[4] + " vs Boston College",
gameDays.week14[3] + " vs Florida"]
},
bama : {
conf: "SEC",
sched:
[gameDays.week1[2] + " vs West Virginia",
gameDays.week2[2] + " vs Florida International",
gameDays.week3[2] + " vs Southern Mississippi",
gameDays.week4[2] + " vs Florida",
gameDays.week6[2] + " @ #18 Ole Miss",
gameDays.week7[2] + " at Arkansas",
gameDays.week8[3] + " vs #21 Texas A&M",
gameDays.week9[3] + " at Tennessee",
gameDays.week11[4] + " @ #13 LSU",
gameDays.week12[4] + " vs Mississippi State",
gameDays.week13[4] + " vs Western Carolina",
gameDays.week14[3] + " vs #6 Auburn"]
}
}
然后在您的逻辑中，将 teamSched 初始化为团队对象中的团队名称:
And then in your logic, initialize teamSched to just the team name in the teams Object:
var teamSched = parseURL();
在 testParse 中，将您的 document.write 行更改为:
And in testParse, change your document.write line to:
document.write(teams[teamSched].sched);
这篇关于动态选择特定对象和键值进行迭代，doc.write to div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
