hx-select-oob

hx-select-oob 属性允许你从响应中选择要通过带外交换进行交换的内容。此属性的值是要进行带外交换的元素列表,以逗号分隔的。此属性几乎总是与 hx-select 配对使用。

以下是选择响应内容子集的示例：

<div>
   <div id="alert"></div>
    <button hx-get="/info" 
            hx-select="#info-details" 
            hx-swap="outerHTML"
            hx-select-oob="#alert">
        Get Info!
    </button>
</div>

此按钮将向 /info 发出一个 GET 请求，然后选择 id 为 info-details 的元素，该元素将替换 DOM 中的整个按钮，此外，在响应中挑选出 id 为 alert 的元素，并将其替换为 DOM 中具有相同 ID 的 div。

以逗号分隔的值列表中的每个值都可以通过使用 hx-swap 来分隔选择器和交换策略来指定任何有效策略。

例如，添加警报内容而不是替换它：

<div>
   <div id="alert"></div>
    <button hx-get="/info"
            hx-select="#info-details"
            hx-swap="outerHTML"
            hx-select-oob="#alert:afterbegin">
        Get Info!
    </button>
</div>

笔记

hx-select-oob 可以继承并放置在父元素上