Htmx hx 指示器，页面上有多个元素-解网

问：

触发 htmx 请求时，我在我的页面上显示一个加载微调器，如下所示：

<div class="col-4 px-4dot5 py-3 bg-secondary-light">
    <label for="stellenangebotLink" class="form-label fs-5">Link</label>
    <div id="linkHelpBlock">E-Mail-Adresse oder Website-URL</div>
    <?= $this->include('components/_htmx_spinner') ?>
    <input
        hx-post="/medien/personal-kampagne/stellenangebot-modal/link"
        hx-trigger="keyup changed delay:300ms"
        hx-include="#stellenangebot_id"
        hx-target="#stellenangebotLinkWrapper"
        hx-indicator=".htmx-indicator"
        name="link"
        id="stellenangebotLink"
        class="form-control"
        aria-describedby="linkHelpBlock">
</div>

微调代码：

<div id="spinner" class="spinner-border spinner-border-sm mx-2 htmx-indicator" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

问题是我的页面上有多个这样的元素，我只想显示最近的微调器。此外，我想在其他元素上重用该微调器片段（没有顺序 ID）。

hx-indicator 页面说：

此属性的值是要应用类的一个或多个元素的 CSS 查询选择器，或关键字 closest，后跟一个 CSS 选择器，它将找到与给定 CSS 选择器匹配的最接近的祖先元素或自身（例如最近的 tr）;

但是这样的CSS选择器是什么？给出一个 javascript-error （）。太宽泛了。closest .htmx-indicatorhtmx.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'htmx-internal-data')closest div

所以我的问题是：我怎样才能选择最接近的微调器片段？hx-indicator

HTML Bootstrap-5 代码点火器-4 HTMX

看起来它们“翻译”为方法调用 - 但仅凭这一点并不能帮助您实际定位元素。检查元素本身及其所有祖先是否与选择器匹配 - 但 ur 不是输入元素的祖先，因此不会找到它（然后反过来解释您得到的 JS 错误。closest .htmx-indicator.closest('.htmx-indicator').htmx-indicator.closest().htmx-indicator

在找到两者的共同祖先之后，您需要再次在 DOM 树中向下遍历才能真正找到该微调元素，例如 - 但看起来他们没有为此提供任何“语法”。.closest('div').querySelector('.htmx-indicator')

closest div太宽泛了

为什么？根据他们的文档，无论您实际针对什么元素，都会将类添加到其中;样式表应该已经附带了htmx-request

.htmx-request .htmx-indicator{
    opacity:1
}
.htmx-request.htmx-indicator{
    opacity:1
}

因此，无论您是否设法让元素本身将类应用于它，或者它是否在给定的示例代码中设置在最外层，都无关紧要 - 它应该以任何一种方式应用不透明度值......？.htmx-indicatorhtmx-requestdiv.htmx-indicator

（如果您在一个页面上的多个位置包含相同的代码，则该 ID 应该会消失。<div id="spinner"

Htmx hx 指示器，页面上有多个元素

Htmx hx-indicator with multiple elements on page

评论

评论