背景切換器

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