…单击特定的书，我就有权使用该书吗？

Question

你好，我正在做一个项目。我的问题是，当我单击一本特定的书时，我不知道该怎么做才能带我去那本书？预先感谢。

HTML：

      <div class="row">
            <div class="col-md-4">

            </div>
            <div class="col-md-8">

                <div id="cards" class="row"></div>

            </div>
      </div>

    <script src="./customJS/data.js" type="module"></script>
    <script src="./customJS/allBooks.js" type="module"></script>

allBooks JS该js包含书籍信息

export const books = [
{
    "id": "1",
    "name": "Origin",
    "writer": "Dan Brown",
    "genre": "New",
    "image": "img/book1.jpg",
},
{
    "id": "2",
    "name": "The Da Vinci Code",
    "writer": "Dan Brown",
    "genre": "New",
    "image": "img/book2.jpg",
},
{
    "id": "3",
    "name": "Inferno",
    "writer": "Dan Brown",
    "genre": "New",
    "image": "img/book3.jpg",
}

];

数据JS

import { books } from './allBooks.js';

const idCards = document.querySelector("#cards");

function display() {
    for (let b of books) {
        idCards.innerHTML += `
            <div>
                <img src="${b.image}">
                <p>${b.name}</p>
                <p>${b.writer}</p>
            </div>
        `;
    }
}
display();

Answer 1

您可以将点击事件侦听器注册到div包装器或img标签。然后，您可以使用书籍ID导航到另一页。数据JS

function handleOnBookClick(bookID) {
  // this is just an example, modify this to your need
  // you can set the onclick event to your image tag if you want to
  location.href = `yourapp/books/${bookID}`;
}

function display() {
  for (let b of books) {
    idCards.innerHTML += `
        <div onclick="handleOnBookClick(${b.id})">
            <img src="${b.image}">
            <p>${b.name}</p>
            <p>${b.writer}</p>
        </div>
    `;
  }
}
display();

奖金：

如果不将其用于其他地方，则可以以display形式编写IIFE函数。

(function () {
  for (let b of books) {
    idCards.innerHTML += `
        <div onclick="handleOnBookClick(${b.id})">
            <img src="${b.image}">
            <p>${b.name}</p>
            <p>${b.writer}</p>
        </div>
    `;
  }
})()