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 策略,否则策略将默认为 outerHTML

例如,要将警报内容前置而不是替换它:

<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>

注意事项