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 code：

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

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

添加到购物车按钮Javascript / jQuery

2 个答案: