페이지 새로 고침 후 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

장바구니에 추가 작업이 실행되었다는 표시가 있습니까? 그렇지 않으면 새 페이지에 고유 한 내용이 있는지 확인한 사용자 지정 선택기가있을 수 있습니다. 그러면 해당 조치를 수행 한 후 카트가 다시 열립니다. – Anthony

@Anthony는 올바른 아이디어를 가지고 있습니다. '영구적 인'변수/플래그/표시기가 필요합니다. 새로 고침 후 사용 가능 ... 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 매개 변수가 표시되어 있으므로 함수에서 매개 변수를 확인할 수 있습니다. 다음 샘플의 하드 코딩 된 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]; 
}

출처

2013-10-30 22:20:27 jdmonty

나는 당신의 논리를보고 그것은 이해하지만 어떤 이유로 그것은 작동하지 않습니다. 그것과 같은 거기에 기능이나 if/else와 함께 뭔가 잘못 되었기 때문에 페이지가 처음으로로드되거나 장바구니에 추가 버튼이 클릭 된 후 미니 카트가 여전히 불투명도를 보이기 때문에 1. 여기에있는 URL을 확인해야합니까? 그런 다음 미니 카트를 불투명도로 변경하십시오 : 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를 실행하는 방법

답변

관련 문제