Как установить массив мобильных переключателей jQuery для мобильных переключателей?

Question

Я работаю с мобильным устройством jQuery и имею набор из 8 переключателей с включенными и выключенными значениями. Мне нужно установить значение для каждого коммутатора в localStorage при изменении пользователем. В свою очередь, мне также нужно получить значения, хранящиеся в localStorage, и соответственно установить каждый коммутатор при загрузке страницы. Вот что я до сих пор. Это далеко не полный!

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

Может ли кто-нибудь помочь в этом? Заранее спасибо!

Answer 1

Вот рабочий пример: http://jsfiddle.net/Gajotres/Dxqr2/

Во-первых, я сделал небольшое изменение в вашей просьбе. Я не хотел беспокоиться о 8 разных хранилищах, нет смысла создавать хранилище для каждого отдельного элемента. Гораздо лучше создать только одно и сохранить в нем все. Чтобы сделать это, я обернул элементы формы внутри тега формы. Нет, мы ничего не собираемся представлять, это необходимо только для того, чтобы мы могли легко разобрать его контент. Этот код будет работать независимо от того, сколько элементов выбора существует.

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