当 Bootstrap 5 轮播项在轮播内变为活动状态时，如何使用内联 HTMX 标签触发补丁事件？

Question

因此，每当 Bootstrap5 轮播中的项目成为活动项目时，我都会尝试使用指定的 id 触发 HTMX 补丁请求。

我知道可以通过一些额外的脚本来实现，但想知道是否完全可以使用 HTMX 标签。

我已经尝试使用 HTMX 显示和相交选项，但这些都会在页面加载时同时触发。

例如：

<div class="carousel-inner">
    <div id="6ec3f558-8526-4a3f-b70a-aeacf052805b"     
        hx-patch="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/"     
        hx-trigger="revealed"     
        hx-swap="none">         
        <a href="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/">         
            <div class="carousel-item active">         
            </div>     
        </a> 
    </div>   
    <div id="f2b061f3-3ccc-42aa-8217-c1194cdf4f00"     
        hx-patch="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/"     
        hx-trigger="revealed"     
        hx-swap="none">     
        <a href="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/">           
            <div class="carousel-item">         
            </div>       
        </a> 
    </div>
</div>

我也尝试过尝试监听Bootstrap Carousel Events，但没有找到或达到预期的结果。

对于纯内联 HTML 标记方法，我在 HTMX 文档中是否缺少另一个解决方案？

Answer 1

回到这个问题后，我最终找到了一个有效的解决方案。

<div id="project-carousel" class="carousel slide" data-bs-ride="carousel">
    ...
    <div class="carousel-inner">
        <div id="6ec3f558-8526-4a3f-b70a-aeacf052805b"     
            hx-patch="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/"     
            hx-trigger="slid.bs.carousel[to == 1] from:#project-carousel once"   
            hx-swap="none">         
            <a href="/projects/6ec3f558-8526-4a3f-b70a-aeacf052805b/">         
                <div class="carousel-item active">         
                </div>     
            </a> 
        </div>   
        <div id="f2b061f3-3ccc-42aa-8217-c1194cdf4f00"     
            hx-patch="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/"     
            hx-trigger="slid.bs.carousel[to == 2] from:#project-carousel once"  
            hx-swap="none">     
            <a href="/projects/f2b061f3-3ccc-42aa-8217-c1194cdf4f00/">           
                <div class="carousel-item">         
                </div>       
            </a> 
        </div>
    </div>
    ...
</div>

关键是监听正确的元素，因为

slid.bs.carousel

是从外部轮播类调用的，之后您只需从事件中过滤

to

参数即可。