如何在页面刷新后执行jQuery

我正在使用WordPress和Woocommerce，目前我在头部有一个迷你购物车，所以当用户点击图标时，它会显示购物车的内容（无需离开页面）。如何在页面刷新后执行jQuery

只要文档准备就绪，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'); 
      }); 

    });*/ 

});

来源

2013-10-30 Derek

在URL中是否有任何指示添加到购物车操作被触发？否则，你可以有一个自定义的选择器，检查任何内容是独特的新页面后，该行动，如果发现取消隐藏购物车 – Anthony

@Anthony有正确的想法，这是你将需要一个'持久'变量/标志/指标刷新后可用...我会建议一个cookie，如果它不在URL中可用。 – jdmonty

@Anthony，是的，无论何时用户添加东西到购物车，那么这是附加在URL后面：/？added-to-cart = 13644 - 其中数字（13644）当然会根据添加的产品而改变。因此，它看起来与此类似：http://my-website.com/shop-my-product/product/?added-to-cart=13644 – Derek

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

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)); 
     }

来源

2013-10-30 04:15:59

这不起作用，因为它始终显示菜单小部件，一旦用户点击添加到购物车按钮（button.lato），我只需要将不透明度更改为1。我的问题是在页面刷新后将不透明度设置为1。感谢 – Derek

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

我想点击处理程序将刷新之前执行。所以上面的代码片段应该工作。

来源

2013-10-30 04:17:40

页面刷新/提交和不透明风格/ css丢失后，DOM将重置 – jdmonty

这是我最初的方法，但就像@funcbigO所说，页面刷新后不透明度样式会丢失，并且会恢复为不透明度：0 – Derek

由于您在评论中指出存在URL参数，因此可以检查函数中的参数。只需将'window.location'中的硬编码网址（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]; 
}

来源

2013-10-30 22:20:27 jdmonty

我看到你的逻辑，这是有道理的，但由于某种原因，它不起作用。它就像功能或if/else有问题，因为当页面第一次加载或点击添加到购物车按钮后，迷你手推车仍然显示不透明度：1。你在这里有什么应该检查一个？然后将迷你推车改为不透明：1，对不对？ – Derek

上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'); 
     } 
    });

来源

2013-10-31 01:52:56 Derek

如何在页面刷新后执行jQuery

回答

相关问题