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

【问题标题】：Populating form text inputs with data-* data using jQuery使用 jQuery 使用 data-* 数据填充表单文本输入
【发布时间】：2012-07-10 22:03:16
【问题描述】：

两天来，我一直在努力解决这个特殊问题。我觉得我很接近，但我无法破解它。我有一个带有 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);
    });

任何帮助将不胜感激！

【问题讨论】：

你是怎么卡住的？发生什么了？什么不会发生？你想发生什么？
@NickJacob $.each
Your code does seem to work, so far as I can tell... 唯一的问题是您在#actions 中没有名为data-ph-name 的属性。
我被卡住了，因为脚本根本什么都不做。例如，我希望它把“这是一个标题”放到 textarea 中，但它没有发生。 $.each 应该根据jQuery site 工作
$(':input[name="phName"]').each(function(){ $(this).val("新值"); });

标签： javascript jquery jquery-data

【解决方案1】：

Your code works，所以我真的不知道问题出在哪里，除了你没有名为“phName”的字段。

【讨论】：

我是个白痴。我忘了把它重命名为 phTitle。我现在可以踢自己的头了。在座的各位好像都注意到了，谢谢大家！

【解决方案2】：

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

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

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

这是一个jsFiddle，它证明了它的工作原理。

【讨论】：

我的回答基于answer。
你的代码没有错；只是 OP 的代码也是正确的：$.each 是一种使for 构造更简单的方法。
最后我只是错误地命名了我的 textarea .. 感谢您的思考。感谢您的努力！

【解决方案3】：

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

【讨论】：

【解决方案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];
}

【讨论】：

什么意思？ input 是一个 html 输入字段，您将值分配给 info 中的内容。