Question

大家好，我有一个问题似乎无法解决。我会尽量保持这个简短。

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

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

背景（刷新时）将是var current所说的。 0-6的值将是新的背景（刷新时），具体取决于它的值。但它不记得用户在刷新时的选择。我已经尝试将var current变成数组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语句的'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'));
      }
    }

背景切换器

1 个答案: