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