产品轮播图仅首个加入购物车按钮显示Spinner问题求助

问题根源 #

你代码里的所有加入购物车按钮都用了同一个id="spinner-btn"，但HTML规范里ID必须是唯一的。jQuery通过ID选择器$("#spinner-btn")只会找到页面中第一个匹配该ID的元素，所以只有第一个按钮点击后会显示Spinner，其他按钮完全没反应。

修复步骤 #

1. 修改HTML按钮标识：把所有按钮的id='spinner-btn'替换成class='spinner-btn'，类(class)可以在多个元素上重复使用。
2. 调整JavaScript选择器：把jQuery选择器从$("#spinner-btn")改成$(".spinner-btn")，这样就能选中所有带这个类的按钮。
3. 修正按钮禁用逻辑：原代码里$(this).prop("disabled", false)是设置按钮可点击，这和加载状态的需求相反，应该改成true，防止用户重复点击。
4. 阻止默认跳转：因为按钮是<a>标签，点击会触发跳转，需添加e.preventDefault()避免页面刷新导致Spinner刚显示就消失。

修改后的完整代码 #

轮播图HTML代码

<div class="carousel-multiple owl-carousel owl-theme">
    <div class='item'>
        <div class="card product-card">
            <div class="card-body">
                <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                <h2 class="title">Apple</h2>
                <p class="text">1 kg</p>
                <div class="price">$ 1.50</div>
                <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
            </div>
        </div>
    </div>
    <div class='item'>
        <div class="card product-card">
            <div class="card-body">
                <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                <h2 class="title">Apple</h2>
                <p class="text">1 kg</p>
                <div class="price">$ 1.50</div>
                <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
            </div>
        </div>
    </div>
    <div class='item'>
        <div class="card product-card">
            <div class="card-body">
                <img src="assets/img/sample/photo/product1.jpg" class="image" alt="product image">
                <h2 class="title">Apple</h2>
                <p class="text">1 kg</p>
                <div class="price">$ 1.50</div>
                <a href="#" class="btn btn-sm btn-primary btn-block spinner-btn">ADD TO CART</a>
            </div>
        </div>
    </div>
</div>

JavaScript代码

$(document).ready(function () {
    $(".spinner-btn").click(function (e) {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        // 禁用按钮，防止重复点击
        $(this).prop("disabled", true);
        // 添加Spinner到按钮
        $(this).html(
            '<span class="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span> Loading'
        );
    });
});

内容的提问来源于stack exchange，提问作者Oscar John