将值（设置）从 jQuery Mobile 1.4 表单中取出并返回到 jQuery Mobile 1.4 表单中。怎么做？

Posted 2023-05-09

【中文标题】将值（设置）从 jQuery Mobile 1.4 表单中取出并返回到 jQuery Mobile 1.4 表单中。怎么做？

【英文标题】：Getting values (settings) out of and back into a jQuery Mobile 1.4 form. How to do?

【发布时间】：2014-02-25 08:11:57

【问题描述】：

所以这是我知道我最初应该问的问题，在这里： How do I get these jQM 1.4 values out of a form with jQuery?

我的问题是 - 我有一个设置面板，允许用户选择年龄、性别和公制或英制单位。我将设置存储在 localStorage 中，每当用户重新打开应用程序时，我都想将它们从 localStorage 中提取出来，以便在应用程序中实现它们。

这是表格

<form style="margin:0;padding:0;width:">                   
  <b>Age</b><br>        
  <input type="range" data-mini="true" data-highlight="true" name="ageview" id="ageview" min="0" max="99" value="30" >
  <p>                                                      
    <b>Gender</b><br>        
    <input type="checkbox" data-role="flipswitch" name="genderview" id="genderview" checked="" data-on-text="f" data-off-text="m" data-wrapper-class="custom-label-flipswitch" data-mini="true">                   
  <p>
    <b>Units</b><br>            
  <fieldset data-role="controlgroup" data-mini="true">        
    <input type="radio" name="unitsview" id="metric_units" value="metric" checked="">
    <label for="metric_units">cm &amp; kg</label>
    <input type="radio" name="unitsview" id="imp_units" value="imp">
    <label for="imp_units">inches &amp; lbs</label>          
  </fieldset>
</form>

当用户点击保存按钮时，id="newsettings" 这个脚本运行

$("#newsettings").click(function()
    age_set = $("#ageview").val();
    gender_set = $("#genderview:checked").length > 0 ? 'f' : 'm';
    units_set = $("input[name=unitsview]:checked").val();
    settingsObject =  "ageset" : age_set, "genderset" : gender_set, "unitset" : units_set //put settings in an object
    localStorage.setItem('settings', JSON.stringify(settingsObject)); //store string in localSettings
);

感谢 Jack 在另一个帖子中的帮助。

问题是我不知道如何将这些更改返回到表单中。我唯一能得到工作的就是时代，像这样

$("#ageview").val(age_set);

我都试过了

$("input[name=unitsview]").val(units_set);

和

$("input[name=unitsview]:checked").val(units_set);

什么都不做。

而且我不知道从哪里开始讨论性别。

我不只是要求使用我的表单设置的解决方案。滑块输入显然适用于时代。我的问题是双重的：

有没有办法轻松插入保存的值？和 如果没有，是否有其他方法可以捕获表单中的这些设置？还有其他更容易操作的控件吗？

【参考方案1】：

这是一个DEMO

$("#setVals").on("click", function()
    var age = 32,
        gender = 'male',
        units = 'imp_units';

    $("#ageview").val(age);
    $("#genderview").prop("checked", gender == 'female').flipswitch( "refresh" );
    if (units == 'metric_units')
        $("#unit_choice1").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice2").checkboxradio( "refresh" );
     else             
        $("#unit_choice2").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice1").checkboxradio( "refresh" );
    
);

在翻转开关上，您将选中的属性设置为 true 或 false，然后在小部件上调用 refresh。对于单选按钮，您为相应的单选按钮设置选中的属性，然后在两者上调用小部件刷新。

【参考方案2】：

如果值存储在变量中，@ezanker 的答案是正确的。但是，当您使用 localStorage 保存数据并在以后检索它们时，您不能使用该方法。

您需要将所有数据保存到一个 array 中，使用JSON.stringfy(array) 将 array 转换为 JSON 字符串 以便能够将其存储在本地存储。

要检索存储数据，JSON 字符串 应解析为 JSON 数组，以便读取存储的值，使用 JSON.parse(localStorage)。

第一步：

遍历 form 元素，检索它们的 type、value 和 id。将每个属性推入一个数组。识别type是一个关键步骤，在此基础上，元素的value被检索出来。此外，type 将用于 switch 语句 以更新 form。

var elements = []; /* array of data */

$("#form_ID input").each(function () 

    /* type is either [type] or [data-role] */
    var elm_type = !! $(this).jqmData("role") ? $(this).jqmData("role") : $(this).prop("type");

    /* value is "string" or "boolean" */
    var elm_val = $(this).prop("type") === "checkbox" || $(this).prop("type") === "radio" ? $(this).prop("checked") : $(this).val();

    /* value will updated based on element's ID */
    var elm_id = "#" + $(this).prop("id");

    /* push data into elements array */
    elements.push(
        "type": elm_type,
            "value": elm_val,
            "id": elm_id
    );
);
/* array to string and save it */
localStorage["info"] = JSON.stringify(elements);

第二步：

要读取存储在localStorage中的数据，需要先解析。然后遍历值并使用 switch 语句更新 form。

为什么要switch 语句？ jQuery Mobile 中的每个小部件都有自己的 enhancement/update 方法。即更新复选框/单选按钮的值，.checkboxradio("refresh") 应该用于在该元素上重新应用样式。

请注意，我使用.ui-page-active 选择器通过活动页面中的id 来定位元素。这是一种预防措施，因为它不针对任何其他页面中的元素。您可以在两个条件下使用相同的 id； 1）不要在同一页面上使用它们。 2) 使用 页面的 id 选择器来定位它们。

/* string to array */
var load_info = JSON.parse(localStorage["info"]);

$.each(load_info, function (i, data) 
    switch (data.type) 
      case "number": /* slider */
          $(".ui-page-active").find(data.id).val(data.value).slider("refresh");
          break;
      case "flipswitch": /* flipswitch */
          $(".ui-page-active").find(data.id).prop("checked", data.value).flipswitch("refresh");
          break;
      case "radio": /* radio button */
          $(".ui-page-active").find(data.id).prop("checked", data.value).checkboxradio("refresh");
          break;
    
);

Demo ⁽¹⁾

⁽¹⁾ 修改表单 -> 保存 -> 下一页 -> 加载 -> 瞧！

【讨论】：

好答案！我从问题中假设 OP 已经弄清楚了 localStorage 部分，只是不知道如何设置翻转开关和单选按钮......

是的，ezanker，我确实将 localStorage 部分弄清楚了。我已经使用 JSON.stringify 和解析。这没有问题，我可以在对它们进行字符串化并很好地解析它们之前和之后对所有值进行控制台记录。年龄变量很好，你是对的 - 如果只是知道如何设置我没有得到的翻转开关和单选按钮。我使用选择作为翻转开关，因为它更容易从中获取值。

@subjectiveeffect 如果您的表单元素与我的回答中提到的不同，您只需添加更多 case 并检索它们的类型和值。

@Omar 我实际上使用了 ezanker 的版本，因为它适合我的其余代码（我已经有一个函数可以存储和检索 localStorage 进出 JSON）并且它可以工作为单位。但是我将翻转开关更改为带有两个选项的选择，这只是我没有得到的参考。我可以得到选项的价值，但我还不能把它放回去。

实际上，我以为我已经成功了。看来我不知道如何引用表单中的元素。

【参考方案3】：

感谢您的反馈。我一直在尝试在我正在使用的选择中引用我的选项，就像这样。

$("#ageview").val(age);
if(gender == "f")
    $("#genderview option[value='f_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='m_gender']").flipswitch( "refresh");
 else             
    $("#genderview option[value='m_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='f_gender']").flipswitch( "refresh");
   
if (units == "metric")
    $("#metric_units").prop("checked", true).checkboxradio( "refresh" );
    $("#imp_units").checkboxradio( "refresh" );
 else             
    $("#imp_units").prop("checked", true).checkboxradio( "refresh" );
    $("#metric_units").checkboxradio( "refresh" );

我只是不知道如何在 jQuery Mobile 中引用这些东西，官方文档让我很困惑:(

编辑：对于编辑，这里是。这太容易了。

$("#genderview").val(gender).flipswitch("refresh"); 

就是这样。

2天的奋斗。 :(

但如果没有你们，我是做不到的。非常感谢。