jQuery和JS函数不能正确加载到页面中

实际上你只是在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)

您试图在.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中。

  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)

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;
}

<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>

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

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();