Javascript 动态选择要迭代的特定对象和键值,doc.write to div
我是一个受过Teamtreehouse教育的新手,试图创建一个简单的JavaScript函数,在解析URL以从URL中的必要字符串中下拉并创建变量后,我将使用该标识符创建一个动态更新脚本,在本例中,该脚本将,将大学足球队的赛程日期和对手发送给HTML中的div 例如,/teams/fsu.html将被解析为fsu和html,然后我将使用字符串fsu来确保我的函数知道它们在哪个页面上,从而知道要传递哪些对象/数组等。我可以连接每个游戏的日期和游戏,但实际上我无法将它们正确地放到页面上。下面是我的代码示例:Javascript 动态选择要迭代的特定对象和键值,doc.write to div,javascript,object,document.write,Javascript,Object,Document.write,我是一个受过Teamtreehouse教育的新手,试图创建一个简单的JavaScript函数,在解析URL以从URL中的必要字符串中下拉并创建变量后,我将使用该标识符创建一个动态更新脚本,在本例中,该脚本将,将大学足球队的赛程日期和对手发送给HTML中的div 例如,/teams/fsu.html将被解析为fsu和html,然后我将使用字符串fsu来确保我的函数知道它们在哪个页面上,从而知道要传递哪些对象/数组等。我可以连接每个游戏的日期和游戏,但实际上我无法将它们正确地放到页面上。下面是我的代
// 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的实际对象键值
我认为我没有把这些语句用于对象是搞砸了,但我认为,作为一个新手,显然,JS文件中的每个变量都是可见的,这会让我清楚地知道如何围绕这些变量编写代码
我将真诚地感谢任何帮助和洞察力,你可以提供这个令人难以置信的难堪的新秀 您最初创建的是要用作变量的字符串 如果您将团队数据包装到一个对象中,那么您拥有的代码的工作原理与gameDays相同。因此,以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初始化为teams对象中的团队名称:
var teamSched = parseURL();
在testParse中,将document.write行更改为:
document.write(teams[teamSched].sched);
太棒了,非常感谢!那么,我只是将单个对象fsu包装在teams变量中,还是将所有对象包装到单个对象中?实际上,我刚刚回答了我自己的问题。对于像我一样阅读绿色内容的任何人来说,你可以将多个对象放入一个对象中,并确保在对象中包装的每个对象后添加逗号!再次感谢你的帮助,我真的很感激!您只需要将团队变量包装到对象中,因此在最初的帖子中,您只需要包装fsu、bama和俄勒冈州。如果在实际代码中有更多团队的数据,则需要对每个团队执行相同的操作。我将编辑我的帖子,展示fsu和bama的情况。