动态更改点击事件上的按钮功能

Dynamically change Button functionality on onclick event

本文关键字：按钮 功能 事件 动态      更新时间：2023-09-26

我想要一个按钮，它执行 2 个功能，而无需刷新或访问另一个页面。1.首先是"添加到购物车"按钮，单击它将产品添加到购物车，一旦将产品添加到购物车，该按钮应 2.更改为从购物车中删除，然后单击从购物车中删除按钮时，它应该从购物车中删除商品，然后再次将按钮更改回添加到购物车。

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

<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 ?>/

我已经尝试了其他论坛的几个选项，但我无法实现。

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

$('.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>

相关文章：