0

我有一个带有一堆属性的对象。有些属性将显示在输入元素中，有些则显示在标签中。

所以，我的代码如下所示：

  var data = getMyData();
  var propNames = Object.keys(data);
  var i, propName, elem;
  for (i = 0; i < propNames.length; ++i) {
    propName = propNames[i];
    elem = $("#" + propName);
    if (elem.is('input')) {
      elem.val(data[propName]);
    } else {
      elem.html(data[propName]);
    }
  }

这是在jquery中做的正确方法吗？因为它看起来有点丑...

谢谢。

4

5 回答 5

2

text我发现将方法名称存储在变量（ / ）中更容易val，这样我们就没有太多的代码重复（代码中的条件会导致不必要的重复）。

此外，既然您无论如何都在使用 jQuery，那么您不妨使用each. 它将所有内容简化为：

$.each(getMyData(), function (key, val)
{
    var el = $("#" + key),
        method = el.is('input') ? 'val' : 'text';

    el[method](val);
});

这是小提琴：http: //jsfiddle.net/pFbSf/

如果您不喜欢将方法名称存储在变量中，请改用：

$.each(getMyData(), function (key, val)
{
    var el = $("#" + key);

    el.is('input') ? el.val(val) : el.text(val);
});

这是小提琴：http: //jsfiddle.net/GQTZv/

如果您担心jQuery 不使用hasOwnProperty，您可以自己运行检查：

var data = getMyData();

$.each(data, function (key, val)
{
    if ( ! data.hasOwnProperty(key) ) return;

    var el = $("#" + key);

    el.is('input') ? el.val(val) : el.text(val);
});

这是小提琴：http: //jsfiddle.net/GQTZv/1/

于 2012-08-21T03:12:13.780 回答
0

我认为您可以使用 jQuery .each() 函数重写该 for 循环，该函数可以迭代任何数组或对象。它需要一个回调函数，该函数给出索引（或键）和每个项目的值。

在您的示例中，它将类似于：

jQuery.each(data, function(key, value) {
   elem = jQuery("#" + value);
   if (elem.is('input')) {...

查看jQuery.each()的文档

于 2012-08-21T03:00:43.387 回答
0

假设您尝试填写 aninput或 a textarea，您应该能够将其替换为：

var data = getMyData();
var propNames = Object.keys(data);

for (i = 0; i < propNames.length; ++i) {
  $("input#"+propNames[i]).val(data[propNames[i]);
  $("textarea#"+propNames[i]).html(data[propNames[i]);
}

您甚至可以将两个 jQuery 选择器替换为：

  $("input#"+propNames[i]).val(data[propNames[i]).html(data[propNames[i]);

由于input元素没有innerHTML和textarea元素没有val，这应该按原样工作。哈克，但它很简洁。

于 2012-08-21T03:00:58.223 回答
0

在我看来一切都很好，马克。我强烈反对的一件事是使用新的 Object 原型方法，例如Object.keys，它仅在 IE9+ 和其他较新的浏览器中可用。相反，要么在你的所有 JS 之前为它创建原型（我实际上不喜欢这样做），要么有一个副本解决方法全局函数/命名空间方法，就像function getkeys()在底部一样照顾它。

http://jsfiddle.net/WJ24q/1/

for (i = 0; i < propNames.length; ++i) {
    var el = $("#" + propNames[i]),
        _d = data[propNames[i]];

    // you could also use a simple ternary instead of the if/else
    el.is('input') ? el.val(_d) : el.html(_d);
}

函数而不是 Object.keys：

function getKeys (obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}
​    ​
于 2012-08-21T03:01:18.897 回答
0

我看不出这看起来有多难看，但我不明白你为什么需要Object.keys......你可以用一个普通的来简化它for...in：

var data = getMyData(), 
    d, $el;
for (d in data) {
  $el = $('#'+ d);
  if ($el.is('input')) {
    $el.val(data[d]);
  } else {
    $el.html(data[d]);
  }
}
于 2012-08-21T03:07:44.447 回答