如何在页面加载后启动 Bootstrap 切换按钮，如果打开则不调用回调

Posted 2023-03-14

【中文标题】如何在页面加载后启动 Bootstrap 切换按钮，如果打开则不调用回调

【英文标题】：How to make Bootstrap toggle button start on after page loads and not call callback if on

【发布时间】：2016-09-30 19:50:02

【问题描述】：

我一直在使用 Laravel 5 进行电子商务。在每个产品的详细信息页面中，我希望访问者单击切换按钮以将该项目添加到购物车，然后再次单击以删除该项目。当我的访问者重新加载页面或稍后返回该产品的详细信息页面时，我希望该切换按钮在页面加载后启动“打开”，以便我的访问者知道该产品已经在购物车中。我想使用一个切换按钮，因为它内置了元素的切换动画。我使用Bootstrap Toggle 作为切换按钮元素。到目前为止我所做的是：

按钮的 html：

<input id="btn_cart_item_toggle" type="checkbox" checked data-toggle="toggle" data- data-offstyle="danger" data-on="<i class='fa fa-shopping-cart'></i> Adicionar ao carrinho" data-off="<i class='fa fa-times'></i> Remover do carrinho"  data-style="slow">

我将布尔值传递给控制器​​ (in_cart) 以判断产品是否已添加到购物车中，因此我有我的 Blade 文件：

@if ($in_cart)
$(document).ready(function() 
    $('#btn_cart_item_toggle').prop('checked', true).change();
    bootbox.alert('DEBUG: Product in cart');
);
@endif

在这之后，我有一些带有 Blade 生成内容的 jQuery 代码，用于使用产品 ID 进行 AJAX 调用（从购物车中添加/删除）。

$('#btn_cart_item_toggle').change(function () 
    if ($(this).prop('checked')) 
        $.post( " route('api_cart_remove') ",  id: ' $product->id ' , function(data) 
            if (data.success) 
                $('span.cart-count').html(data.count);
             else 
                bootbox.alert('Fail');
            
        );
     else 
        $.post( " route('api_cart_add') ",  'id': ' $product->id ' , function(data) 
            if (data.success) 
                $('span.cart-count').html(data.count);
             else 
                bootbox.alert('Fail');
            
        );
    
);

我无法在不调用回调的情况下使该切换按钮开始“打开”。使用$('#btn_cart_item_toggle').prop('checked', true).change(); 调用回调函数，我得到“失败”，因为它正在尝试添加已经在购物车中的产品。如果$in_cart 是true，我希望该按钮启动“打开”而不调用该函数。 我该怎么做？或者有什么更好的方法？

这很难解释，因为它涉及到很多东西，比如 Blade、jQuery、CSS 和 Bootstrap，但我希望我已经足够清楚了。

更新：

根据@CBroe 的评论，我设法让它按我想要的方式工作：

<input id="btn_cart_item_toggle" type="checkbox" data-toggle="toggle" @if (!$in_cart) checked @endif data- data-offstyle="danger" data-on="<i class='fa fa-shopping-cart'></i> Adicionar ao carrinho" data-off="<i class='fa fa-times'></i> Remover do carrinho"  data-style="slow">

【问题讨论】：

我认为您应该编辑输出此输入元素的模板以包含checked 属性以...

是的，现在可以使用了。谢谢。如果您可以根据该评论详细说明答案，我想我可以将其标记为正确答案。

【参考方案1】：

我不会在客户端执行此操作 - 而是编辑输出此输入元素的模板以包含 checked 属性以开头（如果适用）。

（这也应该让它“更快”，这意味着用户将在页面加载时看到正确的状态，而不仅仅是在 JS 运行之后。）