當按下按鈕時切換餅乾和類

我試圖找出一種方法，以便在按下按鈕時切換餅乾+類。當按下按鈕時切換餅乾和類

如果：用btn_fixed類名稱按鈕被按下它：
- 設置cookie的「固定」爲「true」，
- 添加類的「<header>」稱爲「固定」，也當頁面在任何其他時間應用類「固定」時加載，因爲Cookie設置爲真。
否則：
- 設置cookie的「固定」到「假」（默認值，首次進入該網站時），
- 刪除類「固定」，從「<header>」

這是什麼我走到這一步，現在我可以看到的是從我想要它做的很遠：

if (jQuery.cookie("fixed") != "true") { 
     jQuery('a.fixed_btn').click(function() { 
      jQuery('header').addClass('fixed'); 
      jQuery.cookie("fixed", "true"); 
     }); 
    } 
    else 
    { 
     jQuery('a.fixed_btn').click(function() { 
      jQuery('header').removeClass('fixed'); 
    jQuery.cookie("fixed", "false"); 
    } 



<a href="#" class="fixed_btn">Fixed/Fluid</a> 
<header>aaa</header>

http://jsfiddle.net/UWLdq/7/

感謝您的幫助。

來源

2012-11-30 Znk3

請有關HTML/CSS/JavaScript添加到您的問題。你的問題應該能夠在沒有外部資源的情況下獨立站立起來，以便在jsfiddle關閉的情況下（或在x網絡中不可用），你的問題仍然有效並且可以回答。 –

將jquery cookie插件鏈接添加到jsfiddle作爲資源，這將有助於解決問題。 – VIDesignz

你只是需要切換類開始，然後綁定，做它一個click事件。

jQuery(document).ready(function($) { 
    // set class initially based on current cookie value 
    $('.cookiefixed').toggleClass('fixed', $.cookie("fixed") == "true"); 
    // on click, toggle both class and cookie value 
    $('a.fixed_btn').click(function() { 
     $('.cookiefixed').toggleClass('fixed'); 
     $.cookie("fixed", $('.cookiefixed').hasClass('fixed')); 
    }); 
});

~~我建議不要使用 'header'作爲一個事實，即可以有一個頁面上有一個頭一個選擇，雖然到期了，而我懷疑你會希望他們都得到這個類。~~

演示：http://jsfiddle.net/UWLdq/6/

來源

2012-11-30 18:52:25

+1很好！ – VIDesignz

如果你不介意我問，這裏發生了什麼......'!! $ .cookie（「fixed」）' – VIDesignz

基本上''.cookie（「fixed」）'可以返回'「true」'， ''「假」或「未定義」。 '!!'將該值轉換爲「true」，「false」或「undefined」。 '!!'只是一個雙「！」。 '！true === false'，和'!! true === true'。由於toggleClass期望布爾值，所以我確保給它一個以避免錯誤。 –

如何：

$(document).on('click','a.fixed_btn',function(){ 
    var fixed = jQuery.cookie("fixed");    
    jQuery('header').toggleClass('fixed'); 
    jQuery.cookie("fixed", fixed === "true" ? "false" : "true"); 

})

http://jsfiddle.net/UWLdq/5/

來源

2012-11-30 18:51:17 bluetoft

這很好，但OP也需要在頁面加載時檢查cookie。不錯的工作，但！ – VIDesignz

工作過Bluetoft的回答，您需要檢查在頁面加載cookie的爲好。

FIDDLE

$(document).on('click','a.fixed_btn',function(){ 
    var fixed = jQuery.cookie("fixed");    
    jQuery('header').toggleClass('fixed'); 
    jQuery.cookie("fixed", fixed === "true" ? "false" : "true"); 

}); 

if ($.cookie("fixed") != "true") { 
    $('header').addClass('fixed'); 
}else{ 
    $('header').removeClass('fixed'); 
}

來源

2012-11-30 18:57:40 VIDesignz

當按下按鈕時切換餅乾和類

回答

相關問題