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

Question

两天来，我一直在努力解决这个特定问题。我觉得我很接近，但我无法破解它。我有一个带有 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”和“title”之间的破折号被删除了。

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

这很好，它有效（警报：“我是一个标题”），但我真正想要的是用所有这些数据填充某些表单字段。我将表单字段命名为与 info 对象的属性相同，例如：

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

我正在尝试提出一个循环，它将所有 info 对象的属性值放入相应的文本输入（或 textareas）中。这就是我卡住的地方。我目前有以下代码：

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

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

任何帮助将不胜感激！

Answer 1

你的代码有效，所以我真的不知道问题是什么，除了你没有一个名为“phName”的字段。

Answer 2

您在#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>
...

Answer 3

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

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

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

这是一个jsFiddle，它演示了它的工作原理。

Answer 4

尝试这个：

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];
}