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

inputanまたは 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]);
}

2 つの jQuery セレクターを次のように置き換えても問題が解決する場合もあります。

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

input要素には がなくinnerHTML、textarea要素には がないため、valこれはそのまま機能するはずです。ハックですが、簡潔です。

于 2012-08-21T03:00:58.223 に答える
0

私にはすべてが順調に見えます マーク。私が強くお勧めしないことの 1 つはObject.keys、IE9+ およびその他の新しいブラウザーでのみ使用できる のような新しい Object プロトタイプ メソッドを使用することです。代わりに、すべての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 に答える