我希望使用 jQuery 和 JavaScript 向我的页面动态添加内容，但在加载内容时遇到问题。我已经创建了 4 个单独的对象，并且在使用每个参数(book1、book2、album1、album2)调用它时，我正在使用一个函数将每个对象的内容添加到页面中。 我希望能够让页面像这样将对象和相应内容加载到页面:book1、book2、album1、album2。
但是，目前我看到了 book2(Pi 的奇幻漂流)中的“name”、“category”和“price”属性值，以及 book1 中的“selling_points”值。而不是在我加载页面时使用 div。
*当我检查控制台时，我的代码的“product.selling_points.forEach(function(point)”部分目前收到“Uncaught TypeError: Cannot read property 'forEach' of undefined”。
此外，我不确定如何编写代码来添加每个对象各自的 picture_url；我目前只是直接将我想用于 book1 的 img url 添加到每个 div。
body {
background-color: green;
}
#header {
background-color: red;
font-size:300%;
text-align: center;
color: purple;
font-weight: bold;
}
#navbar {
background-color:blue;
text-align: center;
}
#content {
background-color: red;
text-align: center;
font-size:150%;
font-style: oblique;
color:darkblue;
}
#book1 {
background-color: red;
font: black;
}
#book2 {
background-color: red;
font: black;
}
#album1 {
background-color: red;
font: black;
}
#album2 {
background-color: red;
font: black;
}
.image {
height:600px;
width:420px;
display: block;
margin-left: auto;
margin-right: auto;
}
p {
font-size:120%;
text-align: center;
}
.name {
font-size: 150%;
}
background-color: red;
font: black;
}
#album1 {
background-color: red;
font: black;
}
#album2 {
background-color: red;
font: black;
}
.image {
height:600px;
width:420px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Blamazon</title>
</head>
<body>
<div id="header">BLAMAZON</div><br>
<div id="content">Products</div><br>
<div id="book1">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="book2">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="album1">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="album2">
<p class="name"></p>
<p class="category"></p>
<p class="price"></p>
<img class="image">
<p class="description"></p>
</div>
<div id="footer"></div>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
var book1, book2, album1, album2
book1 = {
product_id: 'book1',
"name": "Thinking Fast and Slow",
"category": "Non-Fiction",
"picture_url": "http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg",
"price": "$7.07",
"selling_points": ["This will help you make better decisions!", "Understand how humans make the wrong decisions so often"]
}
book2 = {
product_id: 'book2',
"name": "The Life of Pi",
"category": "Fiction",
"picture-url": "http://bestfreebooks.org/wp-content/uploads/2015/07/Life-of-Pi-Yann-Martel.jpg",
"price": "$9.07",
"selling_points": ["This will make you never want to get on a boat with a tiger...", "And understand the meaning of life!"]
}
album1 = {
product_id: 'album1',
"name": "Back in Black, AC DC",
"category": "Hard Rock",
"picture_url": "https://upload.wikimedia.org/wikipedia/commons/b/be/Acdc_backinblack_cover.jpg",
"price": "$12.07",
"selling_points": ["Oldie but a goodie", "Will help you rock out"]
}
album2 = {
product_id: 'album2',
"name": "Good kid maad city",
"category": "Hip-Hop",
"picture_url": "http://ecx.images-amazon.com/images/I/51Zzc7PUDML._SY300_.jpg",
"price": "$12.07",
"selling_points": ["A sprawling masterpiece of technical rapping and structured storytelling", "Defies and expands the conventions of the genre"]
}
var add_product = function(product) {
var $prod = $('#' + product.product_id)
$prod.find('.name').text(product.name)
$prod.find('.category').text(product.category)
$prod.find('.image').attr('src','http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg')
$prod.find('.price').text(product.price)
product.selling_points.forEach(function(point) {
$prod.find('.description').append("<div><br>" + point + "</div><br>")
})
}
add_product(book1)
add_product(book2)
add_product(album1)
add_product(album2)
/*
var add_product = function(product) {
$('.name').text(product.name)
$('.category').text(product.category)
$('.image').attr('src','http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg')
$('.price').text(product.price)
product.selling_points.forEach(function(point) {
$('.description').append("<div><br>" + point + "</div><br>")
})
}
add_product(book1)
add_product(book2)
add_product(album1)
add_product(album2)
*/
</script>
</body>
</html>最佳答案
实际上，您只是在 album1 中打错了字——您使用的是 selling-points 而不是 selling_points。我认为你的脚本加载没问题。 您在不正确的地方进行描述等的原因是 $(.classname) 找到页面中具有类名的所有元素。尝试通过添加 product_id 来添加限定符，并找到与限定符相关的类名 - 如下所示:
var book1, book2, album1, album2
book1 = {
product_id: 'book1',
"name": "Thinking Fast and Slow",
"category": "Non-Fiction",
"picture_url": "http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg",
"price": 7.07,
"selling_points": ["This will help you make better decisions!", "Understand how humans make the wrong decisions so often"]
}
book2 = {
product_id: 'book2',
"name": "The Life of Pi",
"category": "Fiction",
"picture-url": "http://bestfreebooks.org/wp-content/uploads/2015/07/Life-of-Pi-Yann-Martel.jpg",
"price": 9.07,
"selling_points": ["This will make you never want to get on a boat with a tiger...", "And understand the meaning of life!"]
}
album1 = {
product_id: 'album1',
"name": "Back in Black, AC DC",
"category": "Hard Rock",
"picture_url": "https://upload.wikimedia.org/wikipedia/commons/b/be/Acdc_backinblack_cover.jpg",
"price": 12.07,
"selling_points": ["Oldie but a goodie", "Will help you rock out"]
}
album2 = {
product_id: 'album2',
"name": "Good kid maad city",
"category": "Hip-Hop",
"picture_url": "http://ecx.images-amazon.com/images/I/51Zzc7PUDML._SY300_.jpg",
"price": 12.07,
"selling_points": ["A sprawling masterpiece of technical rapping and structured storytelling", "Defies and expands the conventions of the genre"]
}
var add_product = function(product) {
var $prod = $('#' + product.product_id)
$prod.find('.name').text(product.name)
$prod.find('.category').text(product.category)
$prod.find('.image').attr('src','http://ecx.images-amazon.com/images/I/51oXKWrcYYL.jpg')
$prod.find('.price').text(product.price)
product.selling_points.forEach(function(point) {
$prod.find('.description').append("<div><br>" + point + "</div><br>")
})
}
add_product(book1)
add_product(book2)
add_product(album1)
add_product(album2)
关于javascript - jQuery 和 JS 函数未正确加载到页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31658103/