如何使用 .InnerHTML 方法放置特定的数组项
Posted
技术标签:
【中文标题】如何使用 .InnerHTML 方法放置特定的数组项【英文标题】：How do you place a specific array item using .InnerHTML method 【发布时间】：2020-01-11 15:10:31 【问题描述】：好的，这是我遇到的问题：我正在尝试创建一个基本数组来包含一周中每一天的菜单项以显示在菜单板上。我一次只需要访问数组中的一项，并尝试使用 .innerhtml 方法将该项放入 HTML 中。但是，我遇到了一个问题，除非我在我尝试访问的项目之前包含了数组项目，否则它不会显示文本。
我有 2 个 .js 文件与一个 HTML 文件协同工作。一个是菜单项的加载器，我有一个单独的 .js 文件用于数组，因为我希望将来任何人都可以轻松更新，而不必担心他们将代码弄乱。
例如：我尝试选择数组项“1”，但它不会显示，除非我还在 HTML 中将数组项“0”放在它之前。我将通过将pizza2 编码为HTML 中动态项的ID 来表明我想要数组项“1”。本质上，如果没有一个单独的 <p> 元素在它之前引用 pizza1，我就无法选择 pizza2。
我对 JS 比较陌生，所以我现在不确定如何进行故障排除。这是我的代码：
HTML：
link rel="stylesheet" href="pizza.css">
<link href="https://fonts.googleapis.com/css?family=Rye|Bitter&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<!--Forces Cache Clear-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<!--Body-->
<section class="pizza_menu">
<h1>Pizza</h1>
<h1 style="line-height: 0.05em">Station</h1>
<div class="items">
<p>Cheese Pizza</p>
<p>Pepperoni Pizza</p>
<!--Dynamic Menu Item-->
<p id="pizza2"></p>
</div>
</section>
<!--Video Background-->
<section class="background">
<video autoplay muted loop>
<source src="https://corinthdesign.com/private/HTML_menuboards/media/pizza.mp4" type="video/mp4">
</video>
</section>
<script src="menus/pizzaMenu.js"></script>
<script src="js/menuLoader.js"></script>
</body>
加载菜单的 js（包括“console.log”行，以帮助确保它能够将 ID 与数组中的项目连接起来）：
//MONDAY
var a0 = menu[0]
//TUESDAY
var b1 = menu[1]
//WEDNESDAY
var c2 = menu[2]
//THURSDAY
var d3 = menu[3]
//FRIDAY
var e4 = menu[4]
//SATURDAY
var f5 = menu[5]
//SUNDAY
var g6 = menu[6]
$(document).ready(function menuLoader()
console.log(menu[0]);
console.log(menu[1]);
console.log(menu[2]);
console.log(menu[3]);
console.log(menu[4]);
console.log(menu[5]);
console.log(menu[6]);
/////////Below code places menu items///////////
//Monday
document.getElementById("pizza1").innerHTML = a0;
document.getElementById("pizza2").innerHTML = b1;
document.getElementById("pizza3").innerHTML = c2;
document.getElementById("pizza4").innerHTML = d3;
document.getElementById("pizza5").innerHTML = e4;
document.getElementById("pizza6").innerHTML = f5;
document.getElementById("pizza7").innerHTML = g6;
);
```
最后是简单的js数组菜单文件：
var menu = [
//Monday Lunch and Dinner Special
"Meat Lover's Pizza",
//Tuesday Lunch and Dinner Special
"Grilled Vegetable Pizza",
//Wednesday Lunch and Dinner Special
"Cheeseburger Pizza",
//Thursday Lunch and Dinner Special
"Mac and Cheese Pizza",
//Friday Lunch and Dinner Special
"Tandoori Chicken Pizza",
//Saturday Lunch and Dinner Special
"Chicken Bruschetta Pizza",
//Sunday Lunch and Dinner Special
"Sausage Pizza"
]
感谢您的帮助！
【问题讨论】：
为什么要为数组元素创建额外的变量？例如a0
我使用的系统要求我在一周中的每一天都有一个单独的 HTML 文档，并且将每个数组元素轻松地选择为变量可以简化它以确保正确的一天的菜单项正在放置。至少，是这样的想法。我愿意接受有关如何更有效地编码的建议。
那么，你为什么还要使用数组呢？
我希望让其他人编辑菜单尽可能简单。如果他们只需要替换数组中的文本，就不太可能做错了。
你上面的html中的pizza1等在哪里？
【参考方案1】：
只需获取当前日期并使用它从提供的列表中查找相应的菜单：
var menu =
"Monday" : "Meat Lover's Pizza",
"Tuesday" : "Grilled Vegetable Pizza",
"Wednesday" : "Cheeseburger Pizza",
"Thursday" : "Mac and Cheese Pizza",
"Friday" : "Tandoori Chicken Pizza",
"Saturday" : "Chicken Bruschetta Pizza",
"Sunday" : "Sausage Pizza"
;
var date = new Date();
var dayOfWeek = date.toLocaleDateString("en-gb", weekday: 'long' );
document.getElementById("pizzaOfTheDay").innerHTML = menu[dayOfWeek];<!--Body-->
<section class="pizza_menu">
<h1>Pizza</h1>
<h1 style="line-height: 0.05em">Station</h1>
<div class="items">
<p>Cheese Pizza</p>
<p>Pepperoni Pizza</p>
<!--Dynamic Menu Item-->
<p id="pizzaOfTheDay"></p>
</div>
</section>
<!--Video Background-->
<section class="background">
<video autoplay muted loop>
<source src="https://corinthdesign.com/private/HTML_menuboards/media/pizza.mp4" type="video/mp4">
</video>
</section>【讨论】：
这太棒了！太感谢了。这是一个整体上更简单的解决方案，并且简化了整个 js。我很感激！ 整洁的解决方案！ 可以通过使用.getDate() 而不是.toLocaleDateString("en-gb", weekday: 'long' ) 并为菜单使用普通数组（这需要从周日的特别菜单开始）来实现进一步的简化，但当前的一个在可读性上得分。
@cars10m 谢谢。我试图让 js 尽可能简单，因为他网站的其他用户将内容管理数据。以上是关于如何使用 .InnerHTML 方法放置特定的数组项的主要内容，如果未能解决你的问题，请参考以下文章
如何从具有多个数组的字典中获取特定键并存储到放置在表格视图单元格中的字符串中
如何通过jQuery中的类获取特定html元素的innerHTML？