Question

我有一个简单的网站，该网站从Google图书API获取图书列表。我有一个名为scripts.js的单独文件，该文件正在获取所有书籍信息（书名，作者，ISBN，指向图像的链接）。

我想在画廊样式页面中为每本书创建一个div，其中有该书的图片，并且在书的顶部是书名，作者和ISBN。

我曾尝试用Javascript创建DIV，但我希望每个DIV中都包含h3，p和img，但我似乎无法全神贯注于如何在Javascript中做到这一点。

我的图库HTML代码：

<div id="content">
            <h2>My Bookshelf</h2>
            <div class="book">
                <!-- The book image is the background of the div -->
                <h3 class="book-title">Title</h3>
                <p class="book-isbn">ISBN: 000000</p>
                <p class="book-author">Authors: ABC</p>
            </div>
        </div>

我的Javascript代码遍历JSON文件并返回所需的信息。

// Returns an array with the book title, ISBN, author, bookmark icon, description, image 
    apiRequest.onreadystatechange = () => {
        if (apiRequest.readyState === 4) {
            const response = JSON.parse(apiRequest.response);
            var bookList = response.items;
            // Removes old search results before display new ones
            bookSection.innerHTML = "";
            for (let i = 0; i < bookList.length; i++) {
                console.log(i);
                var title = (bookList[i]["volumeInfo"]["title"]);
                try {
                    var isbn = (bookList[i]["volumeInfo"]["industryIdentifiers"][0]["identifier"]);
                } catch (TypeError) {
                    var isbn = "ISBN Not Available";
                }
                var author = (bookList[i]["volumeInfo"]["authors"]);
                var description = (bookList[i]["description"]);
                try {
                    var image = (bookList[i]["volumeInfo"]["imageLinks"]["thumbnail"]);
                } catch (TypeError) {
                    var image = "img/unavailable.png";
                }
            }
        }
    }

Answer 1

您可以使用模板文字来简化您的工作。

您可以这样做：

var bookSection = `<div id="content">
        <h2>My Bookshelf</h2>
        <div class="book">
            <!-- The book image is the background of the div -->
            <h3 class="book-title">${titleVar}</h3>
            <p class="book-isbn">ISBN: ${ISBNVar}</p>
            <p class="book-author">Authors: ${AuthorsVar}</p>
        </div>
    </div>`;

从此处了解有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

您的代码应如下所示

gantt.config.lightbox.sections = [
        {name: "description",  height: 40, map_to: "text", type: "textarea", focus: true},
        {name: "priority", label: "Priority", height: 23, map_to: "priority",  type: "select", options: [
            {key:1, label: "High"},
            {key:2, label: "Normal"},
            {key:3, label: "Low"}
         ]},
    {name: "Assignment", height: 23, map_to: "responsible", type: "select", options: [
            {key:1, label: "User-1"},
            {key:2, label: "User-2"},
            {key:3, label: "User-3"},
            {key:4, label: "User-4"},
            {key:5, label: "User-5"},
            {key:6, label: "User-6"},
            {key:7, label: "User-7"},
        {key:8, label: "User-8"},
        {key:8, label: "User-9"},
        {key:10, label: "Vendor"},
            {key:11, label: "Client"},
        {key:12, label: "N/A"}

}

如何从一个数组创建多个HTML元素？

2 个答案: