Question

我有这个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语句中。我能举个例子吗？谢谢！

Answer 1

这可能会有所帮助。防爆。设置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并在刷新后获取cookie

Answer 2

您可以使用框架来完成这项工作。

<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>

Answer 3

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";
  }
}

在Javascript Switch Statement上设置Cookie

3 个答案: