改变逻辑 - jQuery

Question

我有在 Magento 购物车中添加和删除产品的按钮，但这与该问题无关。我想做的是改变他们正在做的事情的逻辑。目前，当点击购买按钮时，产品被添加到购物车中，按钮被“更改”以将其删除，并且所有其他按钮都被禁用点击。单击删除按钮时，已添加的产品将被删除，并且可以再次单击所有其他按钮。

我想将逻辑更改为以下内容：单击购买按钮时，将产品添加到购物车中，并且“更改”以删除购买按钮（到目前为止一切都与以前相同）。但是，所有按钮仍可单击，如果单击任何其他购买按钮，则会删除添加的产品并添加新产品。

我在很多方面进行了研究和思考，但我找不到这样做的方法。

按钮代码：

<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<button style="display: none;" type="button" id="cartaoMensagemRemover<?php echo $_product->getId(); ?>" title="Remover" class="button btn-cart" onclick="removeCartaotoCart('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Remover</span></span></button>

Ajax 申请代码：

function addCartao(product_id){
                $j('#cartaoMensagem'+product_id).hide();
                $j('#cartaoMensagemRemover'+product_id).show();
                $j('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000'});
                $j.ajax({
                  type: "POST",
                  url: "<?php echo Mage::getUrl('fol_carousel/ajax/addCartao') ?>",
                  data: {
                    product_id: product_id
                  },
                  dataType: 'json',
                  cache : false,
                  beforeSend: function () {

                  },
                  success: function (retorno) {
                    var button = $j('#cartaoMensagemRemover'+product_id);

                    $j('#cartao').find(':button').not(button).attr('disabled',true);
                    $j('.item-custom').append('<tr id="trAppend"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
                    getSubTotal();
                    getGrandTotal();

                  },
                  complete: function () {

                  },
                  error: function (x,y,z) {
                    alert("error");
                    alert(x);
                    alert(y);
                    alert(z);
                    window.location.reload();
                    history.go(0);
                    window.location.href=window.location.href;
                  }
              });
            }

            function removeCartaotoCart(itemId){
                $j('#cartaoMensagemRemover'+itemId).hide();
                $j('#cartaoMensagem'+itemId).show();
                $j.ajax({
                    type:"POST",
                    url:"<?php echo Mage::getUrl('fol_carousel/ajax/removeCartao') ?>",
                    data:{
                        itemId: itemId
                    },
                    cache: false,
                    beforeSend: function(){

                    },
                    success: function(retorno){
                        var button = $j('#cartaoMensagemRemover'+itemId);
                        $j('#cartao').find(':button').attr('disabled',false);
                        $j('.item-custom #trAppend').remove();
                        getSubTotal();
                        getGrandTotal();             
                    },
                    complete: function () {

                    },
                    error: function (x,y,z) {
                    alert("error");
                    alert(x);
                    alert(y);
                    alert(z);
                    window.location.reload();
                    history.go(0);
                    window.location.href=window.location.href;
                  }
                });
            }

Answer 1

我“简化”了你的代码很多......因为我不能用你的 PHP 做一个例子。
所以“再现”行为在this CodePen。

现在您需要做的，是将添加的产品 ID 保存在“内存”中的变量中。

添加时...如果已经有产品ID，则调用remove函数，然后添加其他产品。

应该就这么简单。
所以这里是another CodePen，需要进行修改。

var productSelected = "";  // The variable used as a "memory".

function addCartao(product_id){

  if( productSelected != "" ){
    removeCartaotoCart(productSelected);    // Remove the item in cart, if there is one.
  }

  console.log("Add "+product_id);
  productSelected = product_id;             // Keep the product id in "memory".

  $('#cartaoMensagem'+product_id).hide();
  $('#cartaoMensagemRemover'+product_id).show();
  $('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000','color':'white'});
  //Ajax...

  // In the success callback:
  var button = $('#cartaoMensagemRemover'+product_id);
  //$('#cartao').find(':button').not(button).attr('disabled',true);   // Do not disable the other buttons.
}

function removeCartaotoCart(itemId){
  console.log("Remove "+itemId);
  productSelected = "";               // Remove the product id from "memory"

  $('#cartaoMensagemRemover'+itemId).hide();
  $('#cartaoMensagem'+itemId).show();
  //Ajax...

  // In the success callback:
  var button = $('#cartaoMensagemRemover'+itemId);
  //$('#cartao').find(':button').attr('disabled',false);   // The other buttons aren't disabled... This line is useless.
}