Question

我希望使用jQuery和JavaScript动态地向我的页面添加内容，但是在加载内容时遇到问题。我创建了4个独立的对象，当我使用每个参数（book1，book2，album1，album2）调用它时，我正在使用一个函数将每个对象的内容添加到页面中。 我希望能够让页面将对象和相应内容加载到页面中：book1，book2，album1，album2。

然而，目前，我正在看到book2（Life of Pi）中的“name”，“category”和“price”属性值，以及来自book1的“selling_points”值。我加载页面时会改为div。

*当我检查控制台时，我的代码中的“product.selling_points.forEach（function（point）”部分正在获取“未捕获的TypeError：无法读取未定义的'属性'”。

另外，我不知道如何编写代码来添加每个对象的相应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>

Answer 1

实际上你在专辑1中只有一个拼写错误 - 你有卖点而不是sell_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)

Answer 2

您试图在.js文件中加载jQuery文件。您的文件中也有<script></script>个标记。这些不是必需的，可能会破坏正在读取的文件。

相反，在HTML中加载JS。

如果你真的需要将jQuery加载到JS文件中，我建议使用这段代码：

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-2.1.1.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

但所有这一切确实是将代码附加到HTML中。

＆＃13;

  var book1, book2, album1, album2

  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 = {
    "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 = {
    "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 = {
    "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) {
    $('.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)

＆＃13;

body {
  background-color: green;
}
#header {
  background-color: purple;
  font-size:200%;
  text-align: center;
}
#navbar {
  background-color:blue;
  text-align: center;
}
#content {
  background-color: red;
  text-align: center;
}
#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;

}

＆＃13;

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Blamazon</title>
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</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>
    <p class="description"></p>
  </div>
  <div id="book2">
    <p class=name></p>
    <p class=category></p>
    <p class=price></p>
    <img class="image"></p>
    <p class="description"></p>
  </div>
  <div id="album1">
    <p class=name></p>
    <p class=category></p>
    <p class=price></p>
    <img class="image"></p>
    <p class="description"></p>
  </div>
  <div id="album2">
    <p class=name></p>
    <p class=category></p>
    <p class=price></p>
    <img class="image"></p>
    <p class="description"></p>
  </div>

<div id="footer"><div>

＆＃13;

供将来参考，打开浏览器控制台日志，它会显示Javascript中的所有错误。

Answer 3

var book1, book2, album1, album2;

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"],
    add: function () {
        $('#book1 .name').text(this.name);
        $('#book1 .category').text(this.category);
        $('#book1 .price').text(this.price);
        $('#book1 .image').attr('src', this.picture_url);
        $('#book1 .name').text(this.name);
        this.selling_points.forEach(function (point) {
            $('#book1 .description').append("<div><br>" + point + "</div><br>");
        });
    }
}

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!"],
    add: function () {
        $('#book2 .name').text(this.name);
        $('#book2 .category').text(this.category);
        $('#book2 .price').text(this.price);
        $('#book2 .image').attr('src', this.picture_url);
        $('#book2 .name').text(this.name);
        this.selling_points.forEach(function (point) {
            $('#book2 .description').append("<div><br>" + point + "</div><br>");
        });
    }
}

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"],
    add: function () {
        $('#album1 .name').text(this.name);
        $('#album1 .category').text(this.category);
        $('#album1 .price').text(this.price);
        $('#album1 .image').attr('src', this.picture_url);
        $('#album1 .name').text(this.name);
        this.selling_points.forEach(function (point) {
            $('#album1 .description').append("<div><br>" + point + "</div><br>");
        });
    }
}

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"],
    add: function () {
        $('#album2 .name').text(this.name);
        $('#album2 .category').text(this.category);
        $('#album2 .price').text(this.price);
        $('#album2 .image').attr('src', this.picture_url);
        $('#album2 .name').text(this.name);
        this.selling_points.forEach(function (point) {
            $('#album2 .description').append("<div><br>" + point + "</div><br>");
        });
    }
}

book1.add();
book2.add();
album1.add();
album2.add();

jQuery和JS函数没有正确加载到页面中

3 个答案: