section标签class设置疑问及Google Books API调用异常求助

1. 核心问题：DOM选择器不匹配 #

你的HTML中section标签的class是styles，但JavaScript里却用$('.book')去获取data-title和data-author属性——这会导致title和author变量拿到的是undefined，API实际执行的是无效查询，自然返回错误的书籍。

修复方法： #

• 方案一：给section标签添加book类，保持JS选择器不变：

<section class="styles book" data-title="Animal Farm" data-author="George Orwell">
  <img src="" alt="" class="thumbnail" />  
  <header>
    <h3 class="title"></h3>
    <h4 class="author"></h4>
  </header>
</section>

• 方案二：修改JS中的选择器，匹配HTML里的styles类：

var title = $('.styles').data('title');
var author = $('.styles').data('author');

2. 优化API请求URL（避免参数编码问题） #

直接拼接字符串到URL中，若书名/作者包含空格、特殊字符会导致请求格式错误，需要用encodeURIComponent()对参数做编码处理：

var encodedTitle = encodeURIComponent(title);
var encodedAuthor = encodeURIComponent(author);
var url = `https://www.googleapis.com/books/v1/volumes?q=${encodedTitle}+inauthor:${encodedAuthor}&orderBy=relevance&maxResults=1`;

3. 增强API响应的容错处理 #

Google Books API返回的数据可能存在缺失（比如无封面图、作者信息为空），直接访问属性会触发报错；同时你设置了maxResults=1，无需用$.each循环单个元素：

function handleResponse(response) {
  // 处理无匹配结果的情况
  if (!response.items || response.items.length === 0) {
    $('.title').text('未找到匹配书籍');
    $('.author').text('');
    $('.thumbnail').attr('src', '');
    return;
  }

  var volumeInfo = response.items[0].volumeInfo;
  // 处理字段缺失的情况
  var bookTitle = volumeInfo.title || '无标题';
  var bookAuthor = volumeInfo.authors ? volumeInfo.authors[0] : '未知作者';
  var bookThumb = volumeInfo.imageLinks ? volumeInfo.imageLinks.thumbnail : '';

  $('.title').text(bookTitle);
  $('.author').text(bookAuthor);
  $('.thumbnail').attr('src', bookThumb);
}

4. 关于HTML中styles类的说明 #

你设置的styles类本身没问题，只要CSS中对应的样式规则正确，就能正常生效，这部分无需修改。

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