如何将数组最后2个元素注入HTML精选区块并截断描述文本

现存代码问题 #

• fetch请求拿到接口返回值后仅打印日志，未调用handleResponse执行渲染
• 原遍历逻辑遇到索引大于7的项直接终止，完全没处理最后2条精选书籍的渲染
• 书籍描述字段未做长度截断
• HTML模板存在语法错误：h4开标签匹配h1闭标签、使用不存在的h8标签、最外层div未闭合、精选区块多个元素重名类名导致选择器易匹配错误
• 未做接口字段空值兜底，谷歌图书接口部分返回项缺失封面、描述、作者字段时会直接抛错阻断渲染

修复步骤 #

1. 调整精选区块HTML结构 #

修正语法错误，给两个精选书籍的容器加独立类名，避免选择器冲突：

<div>
    <div>
        <div class="booklist-featured">
            <h1>Featured</h1>
            <div class="booklist-featured-item">
                <!-- 第一本精选书占位 -->
            </div>
            <div class="booklist-featured-item">
                <!-- 第二本精选书占位 -->
            </div>
        </div>
    </div>
</div>

2. 替换原有JS逻辑 #

fetch('https://www.googleapis.com/books/v1/volumes?q=HTML5')
    .then(response => response.json())
    .then(data => handleResponse(data));

function handleResponse(obj) {
    // 拆分普通书籍、精选书籍数组
    const normalBookList = obj.items.slice(0, 8);
    const featuredBookList = obj.items.slice(8, 10);
    const normalContainer = document.querySelector('.booklist-cards');
    const featuredContainers = document.querySelectorAll('.booklist-featured-item');

    // 描述截断工具：最长140字符，超出补省略号，空值返回兜底文案
    const formatDesc = (desc) => {
        if (!desc) return '暂无书籍简介';
        return desc.length > 140 ? `${desc.slice(0, 140)}...` : desc;
    };

    // 渲染普通书列表
    normalBookList.forEach(item => {
        const bookCard = document.createElement('div');
        bookCard.className = 'books';
        // 字段空值兜底
        const cover = item.volumeInfo.imageLinks?.thumbnail || '';
        const bookTitle = item.volumeInfo.title || '未知书名';
        const authors = item.volumeInfo.authors?.join('、') || '未知作者';
        const desc = formatDesc(item.volumeInfo.description);
        const pageNum = item.volumeInfo.pageCount || '未知';

        bookCard.innerHTML = `
            <img src="${cover}" class="thumbnails" alt="${bookTitle} by ${authors}" />
            <h4>${bookTitle}</h4>
            <p><strong>${authors}</strong></p>
            <p>${desc}</p>
            <br>
            <p>Pages: ${pageNum}</p>
        `;
        normalContainer.append(bookCard);
    });

    // 渲染精选书列表
    featuredBookList.forEach((item, idx) => {
        const cover = item.volumeInfo.imageLinks?.thumbnail || '';
        const bookTitle = item.volumeInfo.title || '未知书名';
        const authors = item.volumeInfo.authors?.join('、') || '未知作者';
        const desc = formatDesc(item.volumeInfo.description);
        const pageNum = item.volumeInfo.pageCount || '未知';

        featuredContainers[idx].innerHTML = `
            <img src="${cover}" class="thumbnails" alt="${bookTitle} by ${authors}" />
            <h3>${bookTitle}</h3>
            <p><strong>${authors}</strong></p>
            <p>${desc}</p>
            <p>Pages: ${pageNum}</p>
        `;
    });
}

关键改动说明 #

• 用Array.slice直接拆分两类书籍的数据源，比遍历里判断索引提前return的逻辑更清晰易维护
• 统一封装描述格式化方法，所有书籍（普通+精选）的简介都自动截断到140字符
• 给所有可能为空的接口字段加了可选链判断和兜底值，避免JS报错导致页面空白
• 修正了原模板里的标签嵌套错误，替换了不存在的h8标签为标准p标签
• 修复了fetch回调未调用渲染函数的问题
• 精选区块调整类名后，选择器不会误匹配到外层父容器，渲染位置准确

内容的提问来源于stack exchange，提问作者Jord