querySelector() 只找到两个项目然后失败

问题描述

我正在使用 salesForce 和 lwc 编写一个非常简单的网站。我想获得对谷歌图书 API 的 https 请求，然后将结果显示到列表中。

当我想加载书籍图像时，我使用 querySelector() 通过数据 ID 查找我的标签（我从请求的书籍 ID 设置数据 ID）。我使用一个函数来迭代 Id，然后设置图像（我也尝试通过这种方式设置图像：apt install python3-dev 但它不起作用。

searchList.html

<img src={Book.id}>

searchList.js：

<template>
    <lightning-card>
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__body">
                      <h2 class="slds-card__header-title">
                          <span class="slds-text-heading_small slds-truncate slds-align_absolute-center">Books</span>
                      </h2>
                    </div>
                </header>
            </div>
            <div class="slds-card__body slds-card__body_inner">
                <div class="slds-m-bottom_x-small slds-wrap slds-grid slds-gutters">
                    <lightning-input type="text"
                        value={searchTitleValue}
                        label="Book title"
                        onchange={updateSearchTitleValue}
                        class="slds-col"
                    ></lightning-input>
                    <lightning-input type="text"
                        value={searchAuthorValue}
                        label="Author"
                        onchange={updateSearchAuthorValue}
                        class="slds-col"
                    ></lightning-input>
                </div>
                <button class="slds-button slds-button_brand slds-button_stretch" onclick={findBooks}>Find Book(s)</button>
                <lightning-layout class="slds-p-around_xx-small slds-grid slds-grid_pull-padded slds-wrap slds-Box slds-grid_align-center">
                    <template for:each={Books} for:item='Book'>
                            <lightning-layout-item class="slds-m-around_xx-small slds-size_4-of-12 slds-Box" key={Book.id}>
                                <h2 class="slds-text-align_center"><b>{Book.volumeInfo.title}</b></h2>
                                <p class="slds-p-horizontal_small">Author: {Book.volumeInfo.authors}</p>
                                <img data-id={Book.id} src="">
                            </lightning-layout-item>
                    </template>
                </lightning-layout> 
            </div>
        </article>
    </lightning-card>
</template>

所以，当我加载书籍时，只有两本书加载并且脚本不起作用，但是来自 .js 和来自 html 的 data-id 一致：

此外，当我寻找另一本书时，它会加载不同数量的图像，有时会加载所有图像。

我需要做什么才能通过此数据 ID 获取此元素。

解决方法

我发现了问题。我忘记将 "" 粘贴到 querySelector 中，所以正确的代码如下所示：

let element = this.template.querySelector('[data-id="' + bookId + '"]');

我对 lwc 了解不多，但做了一些研究，我看到 querySelector 被这样使用：

this.template.querySelector("lightning-input[data-my-id=in3]")

对于：<lightning-input data-my-id="in3" class="second-class">

所以也许试试：this.template.querySelector("img[data-id=" + bookId + "]")

javascript jquery-selectors