我使用 .map 方法返回对象的名称，并最终使用该名称填充表的innerHTML。
问题是我无法让它显示适当的值。
例如，对于 Almond_Divinity 口味，它将有一个带有三个表数据标签的表行。第一个的名称是“Almond Divinity”，第二个的价格是“0.99”，第三个有链接。
我的 JavaScript 如下:
var Menu = {
Almond_Divinity : {name: 'Almond Divinity', price: .99, history: 'x', availability: 'x'},
Mango_Sorbet : {name: 'Mango Sorbet', price: .99, history: '', availability: ''},
Decaf : {name: 'Decaf', price: .99, history: '', availability: ''},
Almond_Chocolate_Coconut : {name: 'Almond Chocolate Coconut', price: .99, history: '', availability: ''},
Alpine_Fudge_Crunch : {name: 'Alpine Fudge Crunch', price: .99, history: '', availability: ''},
Banana_Cream_Pie : {name: 'Banana Cream Pie', price: .99, history: '', availability: ''},
Birthday_Cake : {name: 'Birthday Cake:', price: .99, history: '', availability: ''},
Black_Raspberry_Chocolate_Crunch : {name: 'Black Raspberry Chocolate Crunch', price: .99, history: '', availability: ''},
Blueberry_Cobbler : {name: 'Blueberry Cobbler', price: .99, history: '', availability: ''},
Black_Walnut : {name: 'Black Walnut', price: .99, history: '', availability: ''},
Mint_Chocolate_Chip : {name: 'Mint Chocolate Chip', price: .99, history: '', availability: ''},
Caramel_Apple : {name: 'Caramel Apple:', price: .99, history: '', availability: ''},
Almond_Divinity : {name: 'Almond Divinity', price: .99, history: '', availability: ''},
Cherries_Jubilee : {name: 'Cherries Jubilee', price: .99, history: '', availability: ''},
Tutti_Frutti : {name: 'Tutti Frutti', price: .99, history: '', availability: ''},
Artic_Roll : {name: 'Artic Roll', price: .99, history: '', availability: ''},
Dame_Blanche : {name: 'Dame Blanche', price: .99, history: '', availability: ''},
Sizzling_Brownie : {name: 'Sizzling Brownie', price: .99, history: '', availability: ''},
Choco_Taco : {name: 'Choco-Taco', price: .99, history: '', availability: ''}
};
window.onload = function () {
// calls the keys property of the Object to find Menu and it's associated properties, and then uses the sort method to compare them and sort them alphabetically
const sortedFlavors = Object.keys(Menu).sort(function(a, b) {return - (name[a] - name[b])});
document.querySelector('#icecream_flavors').innerHTML = sortedFlavors.map(function icecream_flavor(currentValue, index, array) { return '<td>${currentValue}</td><td>$.99</td><td><a href="https://en.wikipedia.org/wiki/Ice_cream">History</a></td>'}).join('')
};
我的 HTML 是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Betty's icecream</title>
<link rel="stylesheet" type="text/css" href="css/logo.css"/>
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/body.css"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"/>
<!-- <link rel="stylesheet" href="css/small.css" media="(max-width: 479px)" title="no title"> -->
<style type="text/css" media="screen, print">
@font-face {
font-family: "KR Sweet Tooth";
src: url("fonts/KR Sweet Tooth.ttf");
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<!-- <nav class="minus-padding">
<div class="align-left">
<ul>
<li class="nav-li-left"><a href=""> Home </a></li>
<li class="nav-li-left">Menu <a href=""></a></li>
<li class="nav-li-left">Contact <a href=""></a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li class="nav-li-right">Parties</li>
<li class="nav-li-right">Cakes</li>
</ul>
</div>
</nav> -->
<nav id="nav" class="minus-padding">
<div class="align-left">
<ul>
<li class="nav-li-left"><a href="#"> Home </a></li>
<li class="nav-li-left"><a href="#menu"> Menu </a></li>
<li class="nav-li-left"><a href="#employees">Employees</a></li>
<li class="nav-li-left"><a href="" onclick="newWindow()">View Mobile</a></li>
<li class="nav-li-left"><a id="demo" href="#" >Contact</a></li>
</ul>
</div>
</nav>
<div>
<img srcset="images/food-restaurant-fruits-orange.jpg 1280w"
sizes="(min-width: 36em) 100vw,
100vw"
src="images/food-restaurant-fruits-orange.jpg"
alt="A Banana Split" />
</div>
<div class="home">
<h1>
Betty's <br> <p id="logo"> s </p> Parlor
</h1>
</div>
<div class="container">
<div class="column-left">
<div class="address">
<p class="sidebar" id="sidebar-title">
550 Ice Cream Lane
Mulberry Hollow,
Utah
84501
<br>
<br>
208-208-2080
</p>
<div class="address">
<p class="sidebar">
Put a bird on it 3 wolf moon street art synth, lumbersexual slow-carb poke live-edge brooklyn coloring book tattooed pour-over kombucha. Pitchfork sartorial marfa, tote bag pop-up hell of 90's lo-fi vape coloring book distillery fap fixie. Edison bulb chicharrones actually fanny pack, normcore salvia microdosing fixie activated charcoal direct trade food truck 3 wolf moon. Knausgaard chia copper mug cred, deep v roof party PBR&B kombucha semiotics pickled poutine man bun messenger bag. Shoreditch tbh intelligentsia hammock master cleanse banjo. Wayfarers pork belly skateboard freegan, leggings migas iPhone VHS photo booth knausgaard truffaut. Coloring book forage
</p>
</div>
</div>
</div>
<div id="menu" class="column-right fl-scroll-link">
<table class="table">
<tr>
<th id="header-modified">Flavor
</th>
<th>Price
</th>
<th>
link
</th>
</tr>
<tr id="icecream_flavors">
</tr>
<!-- <tr>
<td>
Almond Divinity
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Chocolate Coconut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Alpine Fudge Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Banana Cream Pie
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Birthday Cake
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>Decaf
</td>
<td>$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Raspberry Chocolate Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Blueberry Cobbler
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Walnut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Mint Chocolate Chip
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Caramel Apple
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Divinity
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Almond Chocolate Coconut
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Alpine Fudge Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Banana Cream Pie
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Birthday Cake
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>Decaf
</td>
<td>$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Black Raspberry Chocolate Crunch
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr>
<tr>
<td>
Blueberry Cobbler
</td>
<td>
$.99
</td>
<td>
<a href="https://en.wikipedia.org/wiki/Ice_cream">History</a>
</td>
</tr> -->
</table>
</div>
<div class="empty">
<div class="row">
<h2 id="employees">Employees</h2>
</div>
</div>
<div style="width: 100%; height: 10px">
</div>
<div class="row-full">
<div class="center">
<!-- grids -->
<div class="grid">
<img class="circle" src="images/bow-tie-businessman-fashion-man.jpg" alt="boss image" />
<a href="#"><p>Meet Ben: An impulsive Vanilla lover.</p></a>
</div>
<div class="grid">
<img class="circle" src="images/man-couple-people-woman.jpg" alt="coworkers boxing" />
<a href="#"><p>Meet Dolley Madison: An argumentative mint chocolate-chipper. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo (1).jpg" alt="man lifting weights" />
<a href="#"><p>Meet Jerry: A strawberry introvert. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo-89524 (1).jpg" alt="little girl" />
<a href="#"><p>Meet Robert Green: A flirtatious chocolate lover. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo-127968.jpg" alt="little girl floating" />
<a href="#"><p>Meet Nicholas Lemery: A sherbet pessimist. </p></a>
</div>
<div class="grid">
<img class="circle" src="images/pexels-photo.jpg" alt="little girl surprised"/>
<a href="#"><p>Meet H. Glasse: An aggressive Rocky Roader. </p></a>
</div>
<footer class="footer">
<div class="footer-row">
<ul id="footer-ul">
<li class="footer-li"><a href="">Franchise</a></li>
<li class="footer-li"><a href="">Jobs</a></li>
<li class="footer-li"><a href="">Inquiries</a></li>
<li class="footer-li"><a href="">Parties</a></li>
<li class="footer-li"><a href="">Adventure</a></li>
<li class="footer-li"><a href="">Coupons</a></li>
</ul>
</div>
<div class="">
<p class="footer-p">
copyright © Trrapp
</p>
</div>
</footer>
</div>
</div>
</div>
</body>
<script src="src/menu.js"
<script>
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
<script>
function newWindow() {
newwindow = window.open('https://trrapp12.github.io/ice-cream/', '', 'width=680,height=680')
function resizeWinTo() {
newwindow.resizeTo(20, 20);
newwindow.focus();
alert("inner function called")
};
resizeWinTo();
};
</script>
</html>
我得到的结果是这样的:
Template literals like 'some ${string}' or "some ${string}" are not working
如果您能提供任何帮助，我们将不胜感激。由于我在这里并没有声称自己很伟大，因此不需要居高临下的评论。
最佳答案
您需要将字符串括在反引号中才能插入字符串:
sortedFlavors.map(function(currentValue) {
return `<td>${currentValue}</td><td>$.99</td><td><a href="https://en.wikipedia.org/wiki/Ice_cream">History</a></td>`
}).join('')
此外，可以肯定的是，这些项目不会被排序为字符串的减法运算结果 NaN。
关于javascript - 模板文字在 JavaScript 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49401876/