javascript - 从 jquery 中同一对象的属性设置输入字段和标签的正确方法是什么？

Question

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

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

  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 中执行此操作的正确方法吗？因为它看起来有点丑......

谢谢。

Answer 1

我发现将方法名称存储在变量 (text/val) 中更容易，这样我们就不会出现太多代码重复(条件语句您的代码会造成不必要的重复)。

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

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

    el[method](val);
});

这是 fiddle :http://jsfiddle.net/pFbSf/

<小时/>

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

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

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

这是 fiddle :http://jsfiddle.net/GQTZv/

<小时/>

如果您担心jQuery not using 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);
});

这是 fiddle :http://jsfiddle.net/GQTZv/1/