2014-03-31 1 views
0

나는 에 대한 클릭 기능이있는 https://github.com/carhartl/jquery-cookie의 기능을 가지고 있으며 배열로 각각 data-hook을 저장하고이를 쿠키로 저장 한 다음 div는 /itin/your-itin/ 페이지에서 볼 수 있습니다. 다음은 설정 한 데모입니다. http://nealfletcher.co.uk/itin/.grid-block div를 클릭하면 여행 일정에 추가되고 http://nealfletcher.co.uk/itin/your-itin/으로 이동하면 해당 div 만 볼 수 있으며 x 시간 동안 쿠키로 저장됩니다. 위의 코드는 훌륭하게 작동하지만 더 많은 div를 추가하기 위해 돌아 가면 쿠키가 저장되지만 이전의 것들은 지워지고 배열에 계속 추가하고 쿠키로 저장 한 다음 탐색 할 때 다음과 같이됩니다. http://nealfletcher.co.uk/itin/your-itin/ 별도로 추가 한 경우에도 모든 선택 사항이 표시됩니다. 그 말이 맞는다면?
jQuery를이 :jQuery : 배열에 추가 클릭하여 쿠키로 저장

$(window).load(function() { 

    var cfilter = []; 

    var $container = $('.block-wrap'); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.grid-block', 
      animationEngine: 'best-available', 
      filter: '.grid-block', 
      masonry: { 
       columnWidth: 151 
      } 
     }); 


     $(".grid-block").click(function() { 

      var thing = $(this).attr("data-hook"); 
      var test = "." + thing; 

      cfilter.push(test); 

      $.removeCookie('listfilter', { 
       path: '/itin/your-itin/' 
      }); 

      // We need to set the cookie only once 
      // it stays at the url for 7 days 
      $.cookie("listfilter", cfilter, { 
       expires: 365, 
       path: '/itin/your-itin/' 
      }); 

     }); 


     if ($.cookie("listfilter") !== 'null') { 
      // console log just for testing 
      console.log($.cookie()); 
      $('.block-wrap').isotope({ 
       filter: $.cookie("listfilter") 
      }); 
      return false; 
     } else { 
      // !! this part could be refactored 
      // as you don't really need to check against the url 
      // when the cookie doesn't exist show all elements 
      $('.block-wrap').isotope({ 
       filter: '' 
      }); 
     } 
    }); 

}); 

모든 제안을 주시면 감사하겠습니다! 당신이 변경된 쿠키를로드하고 그것을 덮어 쓰는 대신에 추가 var cfilter = [];

이 방법 var cfilter = $.cookie("listfilter");

+0

를 사용

당신은 내 변화를 구현하는 오류를했다. 지금은로드하고 추가하는 대신 단순히 덮어 쓰는 것입니다. –

+0

@ RenéRoth 아, 알았어, 내가 어떻게하면 이것에 대해 갈 생각이야? – user1374796

+0

답변으로 내 솔루션을 추가했습니다. –

답변

0

변경합니다.

더 나은 코드 연습은 쿠키가 사용되기 전에 존재하는지 확인하는 것이지만 내 힌트를 얻습니다. ,

if ($.cookie("listfilter") !== 'null') { 
       var cfilter = []; 
      } else { 
       var cfilter = $.cookie("listfilter"); 
      } 

잘못 당신은 첫 페이지에서 쿠키를로드해야합니다

if ($.cookie("listfilter")) { 
       var cfilter = $.cookie("listfilter"); 
      } else { 
       var cfilter =[]; 
      } 
+0

제안 해 주셔서 감사합니다. 아직 행운이 없습니다. 업데이트 된 링크 : http://nealfletcher.co.uk/itin/ 및 일정 페이지 : http://nealfletcher.co.uk/itin/your-/itin /'을 새로 고침하고 더 추가하면 여전히 'itin/your-itin'이 새 변수로 바뀌고 추가되지 않습니다. – user1374796

+0

디버깅을 쉽게하기 위해 변수를 전역으로 변경할 수 있습니까? –

+0

OK, 완료되었습니다. – user1374796

관련 문제