在Alpine.js中基于父元素类的x-显示元素
在我的WooCommerce主题中，当WooCommerce使用AJAX动态地向元素添加“加载”类时，我希望显示旋转图标。
我尝试使用Alpan.js的$el属性来检索当前的DOM节点，但这是行不通的。它也不是在“看”classList的。
如何使用Alpine.js完成这一任务？
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="ajax_add_to_cart add_to_cart_button single_add_to_cart_button button alt flex justify-center" data-product_id="<?php echo get_the_ID(); ?>">
<!-- Spinner Icon -->
<svg x-show="$el.parentElement.classList.contains('loading')" class="animate-spin py-1 h-7 w-7 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
...
</svg>
<!-- Toevoegen aan winkelmand -->
<span x-show="$el.parentElement.classList.contains('!loading')">
<?php echo esc_html( $product->single_add_to_cart_text() ); ?>
</span>
</button>回答 1
Stack Overflow用户
发布于 2022-01-15 13:07:42
深入了解WooCommerce源代码，发现它使用了jQuery事件系统，因此我们必须在jQuery和Alpine.js之间创建一个小事件总线。这两个事件分别是在AJAX调用之前调用的adding_to_cart事件和在成功的AJAX调用之后触发的added_to_cart事件(即产品已经添加到购物车中)。
让我们调用事件总线catchWooEvents
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('catchWooEvents', () => ({
loading: false,
init() {
$(document.body).on('adding_to_cart', (event, button, data) => {
this.loading = true
})
$(document.body).on('added_to_cart', (fragments, cart_hash, button) => {
this.loading = false
})
}
}))
})
</script>我们有一个新的变量loading，它在两个事件之间是活动的。您可以看到，我们在$.on()中使用了jQuery的init()函数来捕获jQuery事件，但随后我们操作了一个Alpine.js变量。
修改后的按钮示例：
<div x-data="catchWooEvents">
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="ajax_add_to_cart add_to_cart_button single_add_to_cart_button button alt flex justify-center" data-product_id="<?php echo get_the_ID(); ?>">
<!-- Spinner Icon -->
<svg x-show="loading" class="animate-spin py-1 h-7 w-7 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
...
</svg>
<!-- Toevoegen aan winkelmand -->
<span x-show="!loading">
<?php echo esc_html( $product->single_add_to_cart_text() ); ?>
</span>
</button>
</div>我们有一个新的父div元素，其中应用了catchWooEvents组件，因此多个子按钮可以共享加载状态。在x-show属性中，loading变量现在是反应性的。
注意：catchWooEvents的定义必须放在jQuery脚本行之后。
https://stackoverflow.com/questions/70697193
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号