設置cookie的JavaScript的switch語句

我有這個JavaScript switch語句：設置cookie的JavaScript的switch語句

function showSideMenu() { 
      switch (document.forms["culinaryrequest"].culinarytype.selectedIndex) { 
       case 0: 
        document.getElementById('case1').style.display="none"; 
        document.getElementById('case2').style.display="none"; 
        document.getElementById('case3').style.display="none"; 
        document.getElementById('case4').style.display="none"; 
        break; 
       case 1: 
        document.getElementById('case1').style.display="table-row"; 
        document.getElementById('case2').style.display="none"; 
        document.getElementById('case3').style.display="none"; 
        document.getElementById('case4').style.display="none"; 
        break; 
       case 2: 
        document.getElementById('case1').style.display="none"; 
        document.getElementById('case2').style.display="table-row"; 
        document.getElementById('case3').style.display="none"; 
        document.getElementById('case4').style.display="none"; 
        break; 
       case 3: 
        document.getElementById('case1').style.display="none"; 
        document.getElementById('case2').style.display="none"; 
        document.getElementById('case3').style.display="table-row"; 
        document.getElementById('case4').style.display="none"; 
        break; 
       case 4: 
        document.getElementById('case1').style.display="none"; 
        document.getElementById('case2').style.display="none"; 
        document.getElementById('case3').style.display="none"; 
        document.getElementById('case4').style.display="table"; 
        break; 
       default: 
        break; 
      } 
     }

當用戶選擇從下拉菜單中的選項之一，顯示由上述switch語句控制的某些元素。問題出現在刷新之後，或者如果用戶遇到錯誤並返回到頁面，則該元素會再次隱藏。我想設置一個cookie來保持元素顯示，但我不確定如何將cookie添加到switch語句。我能舉個例子嗎？謝謝！

來源

2012-11-21 Tmac

後得到的cookie你可以使用一個框架做工作。

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      div.case{ 
       display: none; 
      } 
     </style> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> 
     <script type="text/javascript"> 
      (function($){ 
       $(document).ready(function(){ 
        // Define cookie key 
        var cookiekey = "mycookiekey"; 

        // Get cases 
        var cases = $('div.case').hide(); 

        // Set handler 
        var handler = $('#culinarytype'); 

        // Show case based on cookie 
        handler.val($.cookie(cookiekey)); 

        // Define the select function 
        var selectFromHandler = function(){ 
         selected = handler.val(); 

         // First hide all cases 
         cases.hide(); 

         // Show only wanted case 
         if(selected > 0){ 
          $(cases.get(selected - 1)).show(); 
         } 

         // Set cookie 
         $.cookie(cookiekey, selected, { expires: 7 }); 
        } 

        // Based on handler change 
        handler.change(selectFromHandler); 

        // Default 
        selectFromHandler(); 
       }); 
      })(jQuery); 
     </script> 
    </head> 
    <body> 
     <select id="culinarytype"> 
      <option value="0"></option> 
      <option value="1">Case 1</option> 
      <option value="2">Case 2</option> 
      <option value="3">Case 3</option> 
      <option value="4">Case 4</option> 
     </select> 

     <div class="case">Case 1</div> 
     <div class="case">Case 2</div> 
     <div class="case">Case 3</div> 
     <div class="case">Case 4</div> 
    </body> 
</html>

來源

2012-11-21 15:34:53

可能這可能有幫助。例如，設置Cookie

function SetCookie(cookieName,cookieValue) { 
var today = new Date(); 
var expire = new Date(); 
if (nDays==null || nDays==0) nDays=1; 
expire.setTime(today.getTime() + 3600000*24); 
document.cookie = cookieName+"="+escape(cookieValue) 
       + ";expires="+expire.toGMTString(); 
}

讓每個機箱內的cookie值

function ReadCookie(cookieName) { 
var theCookie=" "+document.cookie; 
var ind=theCookie.indexOf(" "+cookieName+"="); 
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"="); 
if (ind==-1 || cookieName=="") return ""; 
var ind1=theCookie.indexOf(";",ind+1); 
if (ind1==-1) ind1=theCookie.length; 
return unescape(theCookie.substring(ind+cookieName.length+2,ind1)); 
}

調用方法setCookie方法和刷新

來源

2012-11-21 15:15:31 Abdul

function showSideMenu() { 
    var choice = document.forms["culinaryrequest"].culinarytype.selectedIndex; 
    for (var x = 1, y = 4; x < y; x++) { 
     document.getElementById('case' + x).style.display = (x == choice ? (choice == 4 ? "table" : "table-row") : "none"); 
    } 
    setCookie("MYAWESOMECOOKIE", choice); 
} 

function getCookie(c_name) { 
    if (document.cookie.length > 0) { 
    var c_start = document.cookie.indexOf(c_name + "="); 
    if (c_start != -1) { 
     c_start = c_start + c_name.length + 1 ; 
     var c_end = document.cookie.indexOf(";", c_start); 
     if (c_end == -1) { 
     c_end = document.cookie.length; 
     } 
     return decodeURIComponent(document.cookie.substring(c_start, c_end)); 
    } 
    } 
    return null; 
} 

function setCookie(c_name, value, expires) { 
    if (typeof(expires) === "undefined") { 
    expires = 365; 
    } 
    var expiresDate = new Date(); 
    expiresDate.setTime(expiresDate.getTime() + (expires * 24 * 3600 * 1000)); 
    document.cookie = c_name + "=" + encodeURIComponent(value) + ((expires == null) ? "" : "; expires=" + expiresDate.toGMTString()); 
} 

function removeCookie(c_name) { 
    if (getCookie(c_name)) { 
    document.cookie = c_name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
    } 
}

來源

2012-11-21 15:27:27

感謝您的幫助。我嘗試了這一點，並刷新元素仍然消失。而案例4沒有顯示我假設的是因爲它添加「table-row」的時候應該是「table」 – Tmac

對不起，我認爲這是一個拼寫錯誤，我試圖簡明扼要，你需要當頁面加載時，爲了設置元素的顯示屬性，讀取cookie的值Abdul's提供了一套很好的setCookie/readCookie例程，但我也會添加自己的例程 –

嗯，如果我創建了一個小提琴，它會有幫助嗎？ – Tmac

設置cookie的JavaScript的switch語句

回答

相關問題