在 JavaScript 操作后激活 div



在此页面上,我希望客户知道购物车中添加了一些东西。

我想知道如何执行以下操作:

单击"添加到购物车"

后,单击"我的购物车"(右上角)显示的抽屉会自动打开以显示添加的项目。

我将如何在javascript中执行此操作?

我相信这是抽屉的功能:

// Add to cart animation
$(".add-to-cart").click(function(e){
  var elem = $(this);
  elem.prop("disabled", true);
  $("body").on("click", ".checkout", disable);
  e.preventDefault();
  function animate() {
    // $("#cart-animation").show() //
    var addtocartWidth = elem.outerWidth() / 2;
    var addtocartHeight = elem.outerHeight() / 2;
    var addtocartLeft = elem.offset().left + addtocartWidth;
    var addtocartTop = elem.offset().top + addtocartHeight ;
    var buttonAreaWidth = $(".cart-target").outerWidth();
    var buttonAreaHeight = $(".cart-target").outerHeight();
    var buttonAreaLeft = $(".cart-target").offset().left + buttonAreaWidth / 2  - $("#cart-animation").outerWidth() / 2;
    var htmlMargin = $('html').css('margin-top')
    var htmlMarginTrim = parseInt(htmlMargin);
      if (htmlMargin !== 0 ) {
        var buttonAreaTop = $(".cart-target").offset().top + buttonAreaWidth / 2  - htmlMarginTrim - $("#cart-animation").outerHeight() / 2 ;
      } else {
        var buttonAreaTop = $(".cart-target").offset().top + buttonAreaWidth / 2  - $("#cart-animation").outerHeight() / 2 ;
      }
    var path = {
      start: {
        x: addtocartLeft,
        y: addtocartTop,
        angle: 190.012,
        length: 0.2
      },
      end: {
        x: buttonAreaLeft,
        y: buttonAreaTop,
        angle: 90.012,
        length: 0.50
      }
    };
    $('#cart-animation').animate(
      {
        path : new $.path.bezier(path)
      },
      1200,
      function() {
        $(elem).prop("disabled", false)
        $("#cart-animation").fadeOut(500);
        elem.closest('form').submit();
        $("body").off("click", ".checkout", disable);
    }
    );
  }
  animate();
})

您只需触发按钮我的购物车点击事件,这样您将使用已经编写的代码段,而不是自己重写它:

$(".toggle-drawer").trigger("click");

希望对您有所帮助

最新更新