背景切换器

Question

大家好我有一个问题，我似乎无法包住我的头。我会尽量保持这个尽可能简短。

我试图在我使用的背景切换器中设置和获取cookie。切换器运行良好...它在单击时迭代了7个背景主题，Cookie似乎也在工作，但仍然在页面刷新时恢复为默认的“主题”。我认为这不是Cookie问题，因为根据我附加到Cookie的警报，它会返回正确的背景（在警报中）。它只是不加载正确的主题，即使cookie说它是。

我相信我缩小了它在我的JavaScript中的一些代码，可能是背后的错误负责，但我不知道如何调整它，使其做我想做的事情。

背景（在刷新时）将是什么var current表示它会。取决于它的值，0-6的值将成为新的背景（刷新时）。但它不记得刷新时用户的选择。我已经尝试将无功电流转换为数组var current = [0,1,2,3,4,5,6],，但这似乎没有帮助。当我这样做时，它没有显示我的7个主题中的任何一个，只显示了body标记CSS中的默认颜色。

当我试图数组，我改变了这一点：

if(current < pagesCount - 1) { 
        ++current; 
        alert($.cookie('style', current, { expires: 365, path: '/' })); 
       } 
       else { 
        current = 0; 
       } 

这样：

for(var i = 0; i < current.length; i++){ 
    if(current < pagesCount - 1) { 
         ++current; 
         alert($.cookie('style', current, { expires: 365, path: '/' })); 
        } 
        else { 
         current = 0; 
        } 
} 

这是点击功能，但我并没有改变任何东西在这里

$iterate.on('click', function() { 
      if(isAnimating) { 
       return false; 
      } 
      nextPage(animcursor); 
      ++animcursor; 
     }); 

我仍然很不熟悉JavaScript，所以我相信有更好的方法来做我想要的。任何帮助，将不胜感激！提前致谢。

整个代码块：

var changeTheme = (function() { 
var $main = $('#bg-main'), 
    $pages = $main.children('div.bg-page'), 
    $iterate = $('#iterateEffects'), 
    animcursor = 1, 
    pagesCount = $pages.length, 
    current = 0, 
    isAnimating = false, 
    endCurrPage = false, 
    endNextPage = false, 
    animEndEventNames = { 
     'WebkitAnimation' : 'webkitAnimationEnd', 
     'OAnimation' : 'oAnimationEnd', 
     'msAnimation' : 'MSAnimationEnd', 
     'animation' : 'animationend' 
    }, 
    // animation end event name 
    animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') ], 
    // support css animations 
    support = Modernizr.cssanimations; 

function init() { 

    $pages.each(function() { 
     var $page = $(this); 
     $page.data('originalClassList', $page.attr('class')); 
    }); 

    $pages.eq(current).addClass('bg-page-current'); 

    $iterate.on('click', function() { 
     if(isAnimating) { 
      return false; 
     } 
     nextPage(animcursor); 
     ++animcursor; 
    }); 
} 

function nextPage(animation) { 

    if(isAnimating) { 
     return false; 
    } 

    isAnimating = true; 

    var $currPage = $pages.eq(current); 

     if(current < pagesCount - 1) { 
      ++current; 
      alert($.cookie('style', current, { expires: 365, path: '/' })); 
     } 
     else { 
      current = 0; 
     } 

    var $nextPage = $pages.eq(current).addClass('bg-page-current'), 
     outClass = '', inClass = ''; 

     outClass = 'bg-page-scaleDown'; 
     inClass = 'bg-page-scaleUpDown bg-page-delay300'; 


     var classes = ['bg-page-0 bg-page-current','bg-page-1 bg-page-current', 'bg-page-2 bg-page-current', 'bg-page-3 bg-page-current', 'bg-page-4 bg-page-current', 'bg-page-5 bg-page-current', 'bg-page-6 bg-page-current']; 

    $currPage.addClass(outClass).on(animEndEventName, function() { 
     $currPage.off(animEndEventName); 
     endCurrPage = true; 
     if(endNextPage) { 
      onEndAnimation($currPage, $nextPage); 
     } 
    }); 

    $nextPage.addClass(inClass).on(animEndEventName, function() { 
     $nextPage.off(animEndEventName); 
     endNextPage = true; 
     if(endCurrPage) { 
      onEndAnimation($currPage, $nextPage); 
     } 
    }); 

    if(!support) { 
     onEndAnimation($currPage, $nextPage); 
    } 

} 

function onEndAnimation($outpage, $inpage) { 
    endCurrPage = false; 
    endNextPage = false; 
    resetPage($outpage, $inpage); 
    isAnimating = false; 
} 

function resetPage($outpage, $inpage) { 
    $outpage.attr('class', $outpage.data('originalClassList')); 
    $inpage.attr('class', $inpage.data('originalClassList') + ' bg-page-current'); 
} 

//Cookies 
window.onload = function(e) { 
    if($.cookie('style') == undefined) { 
     alert($.cookie('style', current, { expires: 365, path: '/' })); 
     current = 0; 
    } else { 
     current = current; 
    alert($.cookie('style')); 
    } 
} 
init(); 
return { init : init };  
})(); 

Answer 1

如果碰到if语句中的“其他”部分，电流不会在页面加载定义。我认为你需要做一些像

current = $.cookie('style'); 

或者它总是报告为页面加载时未定义？

我只是做了一个评论，但缺乏代表点阻止了这一点。

//Cookies 
    window.onload = function(e) { 
     if($.cookie('style') == undefined) { 
      alert($.cookie('style', current, { expires: 365, path: '/' })); 
      current = 0; 
     } else { 
      current = current; 
     alert($.cookie('style')); 
     } 
    }