Question

我正在使用WordPress和Woocommerce，目前我的标题中有一个迷你购物车，所以当用户点击图标时，它会显示购物车的内容（不离开页面）。

一旦文档准备就绪，jQuery当前的不透明度设置为0。我想知道在单击“添加到购物车”按钮时如何打开迷你购物车？由于在点击添加到购物车按钮时页面会刷新，因此我不知道如何在触发添加到购物车刷新后才能将下面的不透明度更改为1。

这是jQuery，我把我的尝试注释掉了。

jQuery(document).ready(function($) {

    $('#nw-cart-drop-content').css('opacity',0).addClass('nw-hidden');
    $('#nw-cart-drop-toggle').click(function(e) {
        if($('#nw-cart-drop-content').hasClass('nw-hidden')) {
            $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
        }else {
            $('#nw-cart-drop-content').animate({opacity:0},500);
            $('#nw-cart-drop-content').addClass('nw-hidden');
        }
    });

    /*$('button.lato').click(function(e) {

            jQuery(document).ready(function($) {
                $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
            });

    });*/

});

Answer 1

请尝试下面的代码，我还没有测试代码!!

jQuery(document).ready(function($) {

    $('#nw-cart-drop-content').css('opacity',0).addClass('nw-hidden');
    $('#nw-cart-drop-toggle').click(function(e) {
        SetCookie('CartAdded','yes',1);
        OpenCart();
    });  
       var isCartAdded = ReadCookie('CartAdded');
       if(CartAdded=='yes'){
           /// use the opacity code here 
       }

 });

     function OpenCart(){
           if($('#nw-cart-drop-content').hasClass('nw-hidden')) {
              $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
         }else {
             $('#nw-cart-drop-content').animate({opacity:0},500);
            $('#nw-cart-drop-content').addClass('nw-hidden');
         }  
     }

    function SetCookie(cookieName,cookieValue,nDays) {
             var today = new Date();
             var expire = new Date();
            if (nDays==null || nDays==0) nDays=1;
             expire.setTime(today.getTime() + 3600000*24*nDays);
             document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
      }

      function ReadCookie(cookieName) {
             var theCookie=" "+document.cookie;
             var ind=theCookie.indexOf(" "+cookieName+"=");
             if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
             if (ind==-1 || cookieName=="") return "";
             var ind1=theCookie.indexOf(";",ind+1);
             if (ind1==-1) ind1=theCookie.length; 
          return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
        }

Answer 2

$('button.lato').click(function(e) {
    $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
});

我认为点击处理程序会在刷新之前执行。所以上面的代码片段应该可行。

Answer 3

由于您在评论中指出存在URL参数，因此您可以检查函数中的参数。只需将以下示例中的硬编码网址（http://mysite.com/?added-to-cart=13644）替换为'window.location'，现在只要查询字符串被保留，就会在提交页面后显示购物车，这表明它是。

以下是工作示例：http://jsfiddle.net/X664G/7/

jQuery(document).ready(function($) {
    //alert(getParameter('http://mysite.com/?added-to-cart=13644','added-to-cart'));
    if (getParameter('http://mysite.com/?added-to-cart=13644','added-to-cart'))
       $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
    else {
         $('#nw-cart-drop-content').animate({opacity:0},500);
         $('#nw-cart-drop-content').addClass('nw-hidden');
    }
    $('#nw-cart-drop-toggle').click(function(e) {
        if($('#nw-cart-drop-content').hasClass('nw-hidden')) {
            $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
        }else {
            $('#nw-cart-drop-content').animate({opacity:0},500);
            $('#nw-cart-drop-content').addClass('nw-hidden');
        }
    });
});
function getParameter(url,param){
    url = url.split('?');
    var pattern = new RegExp(param+'=(.*?)(;|&|$)','gi');
    return url[1].split(pattern)[1];
}

Answer 4

在对funcbigO的方法做了一些研究之后，我想出了这个并且似乎工作得很好。感谢所有的帮助，希望这有助于其他人浏览。

if(window.location.href.indexOf("?added-to-cart=") > 0) {
       $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
    } else {
        $('#nw-cart-drop-content').css('opacity',0).addClass('nw-hidden');
    }

    $('#nw-cart-drop-toggle').click(function(e) {
        if($('#nw-cart-drop-content').hasClass('nw-hidden')) {
            $('#nw-cart-drop-content').animate({opacity:1},500).removeClass('nw-hidden');
        }else {
            $('#nw-cart-drop-content').animate({opacity:0},500);
            $('#nw-cart-drop-content').addClass('nw-hidden');
        }
    });

如何在页面刷新后执行jQuery

4 个答案: