如何在頁面刷新後執行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

回答

相關問題