添加到购物车Button Javascript / jQuery

Question

我在网站上的添加到购物车按钮中遇到问题。（我正在使用Codeigniter购物车）

现在，我有表格中的按钮。 当我单击添加到购物车按钮时，我的产品即被添加到购物车中。

但是我想要类似的东西-第一次单击“添加到购物车”按钮时，其值应更改为“删除产品”，并调用具有“添加”功能的某些方法。

类似地，当我单击具有值Remove Product的Same按钮时，它应调用具有删除代码的其他方法，并且其值应更改为Add to Cart。

我在用Javascript和AJAX编写代码，但是我不知道如何使用同一按钮调用两种不同的方法。

以下是我尝试过的代码。

<script>
instance.addCart.on('click', function(e){
            e.preventDefault();
            var self = $(this);
            if (self.hasClass('btn-primary')){
                self.removeClass('btn-primary').addClass('btn-default').text('Remove');
            } else {
                self.removeClass('btn-default').addClass('btn-primary').text('Add to Cart');
            }
        });
</script>

 <a href="#" class="btn btn-primary add-cart">Add to Cart</a>

我知道如何在AJAX中发送数据和调用特定方法。

这真令人困惑。 请帮忙

Answer 1

只是将不同的函数放在if/else语句块中？

if (self.hasClass('btn-primary'))
{
    self.removeClass('btn-primary').addClass('btn-default').text('Remove');
    addToCart();
}
else
{
    self.removeClass('btn-default').addClass('btn-primary').text('Add to Cart');
    removeFromCart();
}

Answer 2

您可以尝试以下方法：

JS代码：

$('.btn_add_remove_cart').click(function(e){
    e.preventDefault();
    var self = $(this);
    if (self.hasClass('add-cart')){ 
        // if it's add cart button, replace add-cart class by remove-cart and change label
        self.removeClass('add-cart').addClass('remove-cart').text('Remove');
    } else {
        // it's remove cart button, do the inverse
        self.removeClass('remove-cart').addClass('add-cart').text('Add to Cart');
    }
});

HTML代码：

我为jQuery调用添加了一个新的类btn_add_remove_cart ：

<a href="#" class="btn btn-primary add-cart btn_add_remove_cart">Add to Cart</a>