jQuery 도움말 토글 및 쿠키

Question

두보기 (격자 & 목록) 사이에서 전환되는 토글보기 스크립트에서 작업하고 있습니다. 지금까지는 정상적으로 작동하지만 jQuery 쿠키 플러그인을 사용하여 페이지 새로 고침시 사용자 선택을 기억하기 위해 쿠키를 사용하려고합니다. 그러나보기가 변경된 상태에 있으면 다음 번에 변경하기 위해 두 번 클릭해야합니다.

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

$j("span.switch_thumb").toggle(function(){ 
    $j("span.switch_thumb").addClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").addClass("thumb_view"); 
      $j.cookie('viewState', 'thumbs'); 
    }); 
    }, function() { 
    $j("span.switch_thumb").removeClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").removeClass("thumb_view"); 
      $j.cookie('viewState', 'list'); 
    }); 
}); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
}); 

나는 스크립트가 한 방향으로 만 실행되므로보기를 변경하는 클래스가 추가 된 이유를 알고 있습니다. 하지만 쿠키를 사용하여 페이지가로드 될 때 클래스가 이미 추가 된 경우 반대 방향으로 작동하고 클래스를 제거하므로 두 가지 방법으로 실행되도록 스크립트를 다시 작성할 수 있습니까?

• • • EDIT * * *

좋아, 덕분에 지금은 크게 스크립트를 단순화했습니다, zincorp합니다 -하지만 문제는 지금 어떻게 이전 스크립트에서와 같이 쿠키 상태를 추가합니까? toggleClass (http://docs.jquery.com/Attributes/toggleClass)

Answer 1

에서

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

    $j("span.switch_thumb").click(function() { 
     $j("span.switch_thumb").toggleClass("swap"); 
     $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").toggleClass("thumb_view"); 
     }); 
    }); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
}); 

Answer 2

이봐, 다시 코드로 쿠키 상태를 추가하려면 클릭 기능의 끝에서 .is('.class') 또는 .hasClass('class')을 사용합니다. 여기

는 전체 코드입니다 :

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

$j("span.switch_thumb").click(function() { 
    $j("span.switch_thumb").toggleClass("swap"); 
    $j("ul.display").fadeOut("fast", function() { 
    $j(this).fadeIn("fast").toggleClass("thumb_view"); 
    }); 
    $j.cookie('viewState', $('ul.display').is('.thumb_view') ? 'thumbs' : 'list'); 
}); 

// COOKIES 
// view state 
var viewState = $j.cookie('viewState'); 
// Set the user's selection for the viewState 
if (viewState == 'thumbs') { 
    $j("ul.display").addClass("thumb_view"); 
    $j("span.switch_thumb").addClass("swap"); 
}; 
});