我正在使用 NY Times api 使用 javascript 创建一个图书应用程序，用户可以通过单击任何一本书来查看图书详细信息。我使用 API 中的 primary_isbn10 为每本书指定了不同的 id。问题是，如果我单击任何一本书，它只会在 detals.html 页面中显示一本书的详细信息。我点击哪本书并不重要；重要的是我点击了哪本书。结果没有改变，只显示一本特定的书籍详细信息。
这是代码
index.html
<div class="container-fluid p-5 bg-danger text-white text-center">
<!-- <h1>My First Bootstrap Page</h1> -->
<p>Search any book!</p>
<div id="searchBox" class="mobile-form">
<form action="/search" class="search-form" id="searchform" method="get">
<span id="noEasy"><input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span></span>
<input id="sbox" name="q" placeholder="To search type + hit enter" type="text" x-webkit-speech="">
</form>
</div>
</div>
<div class="container bg-white">
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container-fluid p-0"> <a class="navbar-brand text-uppercase fw-800" href="#"><span class="border-red pe-2">New</span>Product</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
<div class="collapse navbar-collapse" id="myNav">
<div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Best Seller</a> <a class="nav-link" href="#">Women's</a> <a class="nav-link" href="#">Men's</a> <a class="nav-link" href="#">Kid's</a> <a class="nav-link" href="#">Accessories</a> <a class="nav-link" href="#">Cosmetics</a> </div>
</div>
</div>
</nav>
<div class="row currentbooks">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<script src="js/details.js"></script>
详情.html
<div class="container my-5">
<div class="row details-snippet1">
<div class="col-md-7">
<div class="row">
<div class="col-md-2 mini-preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/40/model-858754_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/38/model-858749_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/39/model-858751_960_720.jpg" alt="Preview">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/37/model-858748_960_720.jpg" alt="Preview">
</div>
<div class="col-md-10">
<div class="product-image">
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="category"><span class="theme-text">Category:</span> Women</div>
<div class="title">Black Dress For Women</div>
<div class="ratings my-2">
<div class="stars d-flex">
<div class="theme-text mr-2">Product Ratings: </div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div class="ml-2">(4.5) 50 Reviews</div>
</div>
</div>
<div class="price my-2">$100.00 <strike class="original-price">$120.00</strike></div>
<div class="theme-text subtitle"><b>Brief Description:</b></div>
<div class="brief-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dicta reiciendis odio consequuntur sunt magnam eum facilis quaerat dolor aperiam labore facere amet officiis, unde quae distinctio earum culpa omnis soluta voluptate tempora placeat?.
</div>
<hr>
<div class="row">
<div class="col-md-3">
<input type="number" class="form-control" value="1">
</div>
<div class="col-md-9"><button class="btn addBtn btn-block">Add to basket</button></div>
</div>
</div>
</div>
<div class="additional-details my-5 text-center">
<!-- Nav pills -->
<ul class="nav nav-tabs justify-content-center">
<li class="nav-tabs">
<a class="nav-link active" data-toggle="tab" data-bs-toggle="tab" href="#home">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-bs-toggle="tab" href="#menu1">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-bs-toggle="tab" href="#menu2">Specifications</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content mt-4 mb-3">
<div class="tab-pane container active" id="home">
<div class="description">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident magni assumenda consectetur facere eius. Minus reprehenderit placeat ullam vel ab eaque sequi impedit, ipsum soluta temporibus fugit ipsa. Dolor libero modi molestiae dicta, vitae minus laborum error cum consequatur autem minima eveniet porro obcaecati quibusdam possimus eos, debitis sint magnam, explicabo accusantium aspernatur ipsa repellat tempore nihil. Cum placeat voluptate dignissimos dicta harum consectetur, nemo debitis tempore. Quod culpa perspiciatis unde natus. Modi expedita, ab repellendus reiciendis sed voluptate, culpa laborum ad, consectetur quas tempora quo? Quibusdam doloribus magnam maxime, accusamus officiis odit reiciendis labore laudantium. Molestiae corporis temporibus ad?
</div>
</div>
<div class="tab-pane container fade" id="menu1">
<div class="review">
<p>PUT REVIEWS DESIGN HERE</p>
</div>
</div>
<div class="tab-pane container fade" id="menu2">
<div class="specification">
<p>PUT SPECIFICATIONS HERE</p>
</div>
</div>
</div>
</div>
<div class="related-products details-snippet1">
<div class="related-heading theme-text">Related Products</div>
<div class="row">
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/gsKdPcIyeGg" alt="Related Product">
</div>
<div class="related-title">Lovely Black Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$100.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/sg_gRhbYXhc" alt="">
</div>
<div class="related-title">Lovely Dress With Patterns</div>
<div class="d-flex">
<div class="related-price mr-auto">$1199.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/gJZQcirK8aw" alt="">
</div>
<div class="related-title">Lovely Fashion Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$200.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="related-product">
<img class="img-fluid" src="https://source.unsplash.com/qbB_Z2pXLEU" alt="">
</div>
<div class="related-title">Lovely Red Dress</div>
<div class="d-flex">
<div class="related-price mr-auto">$120.00</div>
<div class="stars d-flex">
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
<div>★</div>
</div>
</div>
</div>
</div>
</div>
</div>
脚本.js
let currentBooks = document.querySelector('.currentbooks')
async function bookTrends() {
let currentdUrl = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=apikey`)
let currentBookData = await currentdUrl.json()
let currntBookRes = currentBookData.results.books
for(let i = 0; i < currntBookRes.length; i++){
let currentBookItems = currntBookRes[i]
let idCurrentBooks = currentBookItems.primary_isbn10
let currentAuthor = currentBookItems.author
let bookCurrent = currentBookItems.title
let currentCoverImg = currentBookItems.book_image
currentBooks.innerHTML += `<div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img src="${currentCoverImg}" alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-red">sale</div>
<div class="title pt-4 pb-1" id="${idCurrentBooks}"><a href="details.html?id=${idCurrentBooks}">${bookCurrent}</a></div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
<div class="price">${currentAuthor}</div>
</div>`
}
}
bookTrends()
详细信息.js
let description = document.querySelector('.description')
let briefDesc = document.querySelector('.brief-description')
let productImg = document.querySelector('.product-image')
let bookDetTitle = document.querySelector('.title')
let urlParam = new URLSearchParams(window.location.search)
let bookId = urlParam.get('id')
let bookUrlId = `details.html?id=` + bookId
async function detailsBook(){
let detailUrl = await fetch(`https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=apikey&id=${bookId}`)
let rawDet = await detailUrl.json()
let allDetsBooks = rawDet.results.books
for(let i = 0; i < allDetsBooks.length; i++){
let detItem = allDetsBooks[i]
let bookDesc = detItem.description
let bookDetImg = detItem.book_image
let titleDet = detItem.title
console.log(titleDet)
bookDetTitle.innerHTML = `<div class="title">${titleDet}</div>`
description.innerHTML = `<p>${bookDesc}</p>`
briefDesc.innerHTML = `<p>${bookDesc}</p>`
productImg.innerHTML = `<img class="img-fluid" src="${bookDetImg}" alt="${titleDet}">`
}
}
detailsBook()
如果我点击任何一本书，我想在details.html页面中显示每个id的详细信息。目前，即使我点击任何一本书，它也会显示一个 ID 详细信息。
我无法在沙箱中重现该示例，但我假设问题如下：
我认为你应该这样做：