0

我正在使用 jQuery mobile 并有一组 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 -->

有人可以帮忙吗？提前致谢！

4

1 回答 1

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：动态添加内容的标记增强

于 2013-05-05T00:19:01.350 回答