javascript - 哪个 jquery 事件可以帮助我更好(点击，悬停？)

Question

我有一个难题

在我的网站中，我需要获取包含在模态中的跨度的值
当模式打开时，它的值会改变。
如果不是，它包含旧值
这是我网店购物车的值(value)
当我点击将产品添加到购物车时，模式打开

我试过这段代码:

$('.ajax_add_to_cart_button').click(function()
{
        if($('#layer_cart').css('display') == 'block')
        { 
            var total_product = $('.ajax_block_products_total').text().replace('€', '').replace(',', '.');
            alert(total_product);
        }  
});

但这包含旧值，因为当我点击添加到购物车时，模式没有打开，所以它被设置为不显示。

哪个事件可以更好地检查模式是否真的打开，因为它需要几秒或几毫秒才能打开，因为有一个 ajax 请求来检查服务器上的购物车。

所以我不知道在模式打开时执行操作哪个更好。

实际上，我尝试在“添加到购物车”按钮上执行此操作，但此时它未打开，因此它包含旧值。

任何形式的帮助将不胜感激

Answer 1

首先，您需要显示 layer_cart，这将使您能够检查 display:block css 规则。

然后要更新您的 total_product 值，您需要一个存储该值的变量，您只需将旧值和新值相加即可获得总值。

检查下面这个例子:

var total_product = 0;

$('.ajax_add_to_cart_button').on("click", function()
{

  $('#layer_cart').show();
  
  if($('#layer_cart').css('display') == 'block')
  { 
    total_product += parseInt($('.ajax_block_products_total').text().replace('€', '').replace(',', '.'));
  }  
  
  alert(total_product);
});

#layer_cart
{
  border: 1px solid red;
  height: 200px;
  width: 200px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax_add_to_cart_button">Add to cart</div>

<ul id="layer_cart">

</ul>

<div class="ajax_block_products_total">€100</div>