Question

我正在尝试使用Google Embedded Viewer API添加“图书预览”按钮。我想将按钮添加到用户获得的每本书结果中。当我使用.append将脚本添加到列表中时，脚本会删除所有内容，而当我提交搜索查询时，所有内容都消失了，而我只看到预览按钮。

我尝试将<script>部分放在HTML文件中，但是当我这样做时，该功能显示为纯文本。我还尝试将脚本放在单独的文件中并使用$.getScript，但这并没有做任何事情。我还尝试将脚本附加到一个单独的div，但这也不起作用。当我将脚本直接放在HTML文件中时，它不会擦除所有内容，但也不能使用数组数据。

主要JS文件：

function displayResults(responseJson, maxResults) {

    console.log(`displayResults ran`);
    console.log(responseJson);
    $('#results-list').empty();

    for (let i = 0; i < responseJson.items.length & i < maxResults; i++){


        $('#results-list').append(
            `
          <li>
          <p>${responseJson.items[i].volumeInfo.industryIdentifiers[1].identifier}</p>
          <img src="${responseJson.items[i].volumeInfo.imageLinks.thumbnail} alt="The book">
          <h3>${responseJson.items[i].volumeInfo.title}</h3>
          <h2>${responseJson.items[i].volumeInfo.authors}</h2>
          <p>${responseJson.items[i].volumeInfo.description}</p>

          <a href="${responseJson.items[i].saleInfo.buyLink}">Buy this Book</a>

          <div></div>

          <input type="submit" class="preview-button" id="book-preview" value="Preview This Book">
          </li>
          `);
         $.getScript("book-viewer-index.js")

        };


      $('#search-results').removeClass('hidden');
};

链接的文件/按钮代码：

 <div>
    <script type="text/javascript" 
      src="https://books.google.com/books/previewlib.js"></script>
    <script type="text/javascript">
      GBS_insertPreviewButtonPopup('ISBN:0738531367');
    </script>
    })
 </div>

预期结果是每个书籍搜索结果下方的一个按钮，将显示硬编码的书籍预览。目前尚无实际结果。我添加了“预览书”按钮，以防万一我必须这样做，但这并不是我想要的。

Answer 1

https://books.google.com/books/previewlib.js仅需要在循环开始前被包含一次。

您只需要为在循环中创建的每个元素调用GBS_insertPreviewButtonPopup，无需将脚本块注入html中即可调用。

直接在结果列表中调用附加项后，可以在循环中调用GBS_insertPreviewButtonPopup。

如何使用jQuery为数组中的每个元素插入其他JS脚本？

1 个答案: