使用jQuery用data-*数据填充表单文本输入

Populating form text inputs with data-* data using jQuery

本文关键字：填充 表单 文本 输入 数据 jQuery data- 使用      更新时间：2023-09-26

两天来，我一直在努力解决这个特殊的问题。我觉得我很接近，但我无法破解它。我有一个带有data-*属性的div：

    <div class="pull-right" id="actions" data-ph-title="I am a title" data-ph-type="and a type" data-ph-source="from a source" data-ph-subject="with a subject">

例如，当试图提醒"data ph title"的值时，我可以执行以下操作，因为"ph"answers"title"之间的短划线显然被删除了。

    var info = $("#actions").data();
    alert(info.phTitle);

这很好，而且很有效（提醒："我是一个标题"），但我真正想要的是用所有这些数据填充某些表单字段。我已经将我的表单字段命名为与信息对象的属性相同，例如：

    <textarea id="placeholder-title" name="phName"></textarea>

我正试图想出一个循环，将info对象的所有属性值放入相应的文本输入（或文本区域）。这就是我陷入困境的地方。我目前有以下代码：

    var info = $("#actions").data();
    $.each(info, function(field, val){
        $("[name='" + field + "']").val(val);
    });

如有任何帮助，我们将不胜感激！

您的代码是有效的，所以除了没有名为"phName"的字段之外，我真的不知道问题出在哪里。

这应该是您所需要的。遍历JSON对象并填充文本区域：

var info = $("#actions").data();
for (var key in info) {
  if (info.hasOwnProperty(key)) {
    $("[name='" + key + "']").val(info[key]);
  }
}

这里有一个jsFiddle演示了它的工作原理。

在#actions中似乎没有phName。但是在表单元素上使用id呢？

var info = $("#actions").data();
$.each(info, function(field, val){
    $("#placeholder-" + field).val(val);
});

和

<textarea id="placeholder-phTitle"></textarea>
<textarea id="placeholder-phSource"></textarea>
...

试试这个：

var fields = $('#myform input, #myform textarea');
for(var i=0; i < fields.length; i++){
   var input = fields[i];
   if(info[input.name]) input.value = info[input.name];
}
相关文章：