如何設置jQuery移動翻轉切換開關的數組？

我正在使用jQuery手機，並有一組8個選擇開關和開關值。我需要做的是在用戶更改localStorage時將每個開關的值設置爲。反過來，我還需要獲取存儲在localStorage中的值，並在頁面加載時相應地設置每個開關。這是我到目前爲止。這遠遠沒有完成！如何設置jQuery移動翻轉切換開關的數組？

$(document).bind('pageinit', function() { 
    function setCats(){ 
     var cats = $('#categories select'); 
     var dealCats = localStorage.getItem("Deal Categories"); 
    } 

    function changeCats(){ 
     var cats = $('#categories select'); 
     for (var i = 0; i < cats.length; i++) { 
      var obj = cats[i]; 
     } 

     $('#categories select').on('change', function(){ 
      localStorage.setItem('Deal Categories', JSON.stringify(obj.id)); 
     }); 
    } 

    $('#categories').on('pagebeforeshow', function(){ 
     setCats(); 
    }); 

    $('#categories').on('pageshow', function(){ 
     changeCats(); 
    }); 

}); 

    <div data-role="page" id="categories"> 

     <div data-role="header" data-position="fixed"> 
      <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a> 
      <h1>Categories</h1> 
     </div><!-- header --> 

     <div data-role="content"> 


      <ul data-role="listview"> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="food">Food & Drink</label> 
         <select name="food" id="food" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="activity">Activity</label> 
         <select name="activity" id="activity" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="spa">Spa & Salon</label> 
         <select name="spa" id="spa" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="fitness">Fitness & Health</label> 
         <select name="fitness" id="fitness" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="homeauto">Home & Auto</label> 
         <select name="homeauto" id="homeauto" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="medical">Medical/Dental</label> 
         <select name="medical" id="medical" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="sports">Sports/Leisure</label> 
         <select name="sports" id="sports" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 
       <li> 
        <div data-role="fieldcontain"> 
        <label for="products">Products</label> 
         <select name="products" id="products" data-role="slider"> 
          <option value="off">Off</option> 
          <option value="on">On</option> 
         </select> 
        </div> 
       </li> 

      </ul> 


     </div><!-- content --> 


    </div><!-- categories -->

任何人都可以幫忙嗎？提前致謝！

來源

2013-05-04 PropSoft

也添加您的HTML。 – Gajotres 2013-05-04 20:07:21

這裏有一個工作示例：http://jsfiddle.net/Gajotres/Dxqr2/

首先，我已經對你的要求略有變化。我不想打擾8個不同的存儲空間，沒有意義爲每個元素創建一個存儲空間。最好只創建一個，並將所有內容都存儲在其中。爲了使我有可能將表單元素包裝在表單標記中。不，我們不會提交任何內容，只需要我們可以輕鬆解析其內容即可。無論有多少select元素存在，此代碼都可以工作。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
    </head> 
    <body> 
     <div data-role="page" id="categories"> 

      <div data-role="header" data-position="fixed"> 
       <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a> 
       <h1>Categories</h1> 
      </div><!-- header --> 
      <div data-role="content"> 
       <form id="test-form" data-ajax="false"> 
        <ul data-role="listview"> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="food">Food & Drink</label> 
           <select name="food" id="food" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="activity">Activity</label> 
           <select name="activity" id="activity" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="spa">Spa & Salon</label> 
           <select name="spa" id="spa" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="fitness">Fitness & Health</label> 
           <select name="fitness" id="fitness" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="homeauto">Home & Auto</label> 
           <select name="homeauto" id="homeauto" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="medical">Medical/Dental</label> 
           <select name="medical" id="medical" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="sports">Sports/Leisure</label> 
           <select name="sports" id="sports" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
         <li> 
          <div data-role="fieldcontain"> 
           <label for="products">Products</label> 
           <select name="products" id="products" data-role="slider"> 
            <option value="off">Off</option> 
            <option value="on">On</option> 
           </select> 
          </div> 
         </li> 
        </ul> 
       </form>  
      </div><!-- content --> 
     </div><!-- categories --> 
    </body> 
</html>

的Javascript：

$(document).on('pagebeforecreate', '#categories', function(){ 
    initializeForm(); 
    $(document).off('change', 'select').on('change', 'select', function(){  
     var fields = $(":input").serializeArray(); 
     storeFormData(JSON.stringify(fields)); 
    });  
}); 

function storeFormData(data) { 
    localStorage.setItem('formData', data); 
} 

function initializeForm() { 
    var formData = localStorage.getItem('formData'); 
    if(formData != null) {  
     jQuery.each(jQuery.parseJSON(formData), function(i, field){ 
      var select = $('select[name="' + field.name + '"]'); 
      select.find('[value="' + field.value + '"]').attr('selected','selected'); 
     }); 
    } 
}

，如果你想知道的方法滑塊（ '刷新'）工作如何來看看最後一件事我其他回答：jQuery Mobile: Markup Enhancement of dynamically added content

來源

2013-05-05 00:19:01 Gajotres

Hi Gajotres，謝謝你的回答！但是，它不適用於jsfiddle.com示例或我的應用程序。我得到的第一個錯誤是無法讀取null..so的方法，我把每個語句都包裝在一個if formData語句中，但是我得到這個錯誤：「不能在初始化之前調用slider上的方法;試圖調用方法'refresh'」Any如何解決這個問題的想法？ – PropSoft 2013-05-05 01:06:06

早上3點進行開發時，這是一個問題。它現在會工作。 – Gajotres 2013-05-05 07:36:58

太棒了！現在效果很好。謝謝Gajotres！ – PropSoft 2013-05-06 17:13:49

如何設置jQuery移動翻轉切換開關的數組？

回答

相關問題