0

大家好，我遇到了一个我似乎无法解决的问题。我会尽量保持简短。

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

我相信我将它缩小到我的 javascript 中可能导致错误背景的一些代码，但是我不知道如何调整它以使其达到我想要的效果。

背景（刷新时）将是任何var current所说的。0-6 的值将是一个新背景（刷新时），具体取决于它的值。但它不记得用户在刷新时的选择。我试过将 var current 变成一个 array 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 };     
})();
4

1 回答 1

0

如果这触及 if 语句的“else”部分，则当前未在页面加载时定义。我认为你需要做类似的事情

   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'));
      }
    }
于 2013-10-31T18:01:06.117 回答