javascript - 在 onclick 事件上动态更改按钮功能

Question

我希望有一个按钮可以执行 2 个功能，而无需刷新或访问其他页面。 1. 首先是添加到购物车按钮，点击后会将产品添加到购物车，一旦产品添加到购物车，按钮应该 2. 更改为从购物车删除 当点击从购物车中删除按钮时，它应该从购物车中删除该商品，并再次将按钮更改回添加到购物车。

现在我正在使用非常简单的 onclick 事件按钮

<button class="btn btn-sm btn-inverse btn-embossed" onclick="ajaxSubmit('/add/product/<?php echo $productId; ?>/"><span><?php echo $this->__('Add to Cart') ?></span></button>

可以通过以下网址删除产品

/remove/product/<?php echo $productId ?>/

我已经尝试过其他论坛的多种选项，但未能实现。

Answer 1

我建议您将 ajax 调用从 onclick 事件中移出，这样您就不需要重复的长代码。其次，将当前操作和 id 等参数添加到 data 中以进行 jQuery 访问。

$('.product-btn').click(function(){
	if($(this).attr('data-action')=="add"){
  	  ajaxSubmit('/add/product/'+$(this).attr('data-id')+'/');
          $(this).attr('data-action','remove');
          $(this).children('span').html('Remove from cart');
  }else{
  	ajaxSubmit('/remove/product/'+$(this).attr('data-id')+'/');
        $(this).attr('data-action','add');
        $(this).children('span').html('Add to cart');
  }
});

<button class="btn btn-sm btn-inverse btn-embossed product-btn" data-action="add" data-id="<?php echo $productId; ?>"><span><?php echo $this->__('Add to Cart') ?></span></button>