0

私たちは皆、以前にこれをやったと確信しています：

<a id="232" rel="link_to_user" name="user_details" class="list hoverable clickable selectable">
USER #232
</a>

しかし、この div に関する追跡情報を保存する方法がもっと必要です。

<a id="232-343-22" rel="link_to_user:fotomeshed" name="user_details" class="groupcolor-45 elements-698 list hoverable clickable selectable">
User: John Doe
</a>

そして病気はどんどん増えていきます。私たちは、かわいそうな小さな要素とその属性の中にそれを詰め込み続けています。すべては、それが誰であるかを追跡できるようにするためです。

私のJSに関する知識が限られているので、誰かが次のようなことをする方法を教えてください:

<a id="33">USER #33</a>

$(#33).attr({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

ここでは、私が目に見えない属性と呼ぶものを追加しました。なぜなら、神をプレイして、それらの属性を問題ないようにその場で作成したからです。クールな部分は、これらが変数の土地のどこかにある独自の小さなオブジェクトに保持されることです. タグ自体ではありません。

その後、はるか遠くにネストされたコードで、「ジョンの group_color は何だろう...」と言うことができるようになります。

user_group_color = $(table).find(a['username':'john']).attr('group_color');

それからバム!!!! 捕虜！！！！

alert(user_group_color + " is a bitchin color!");

あなたは彼のグループの色を知ることができます...タグにナンセンスを追跡する膨大な要素を追加する必要はありません。

では、このようなものは存在するのでしょうか。そうでない場合は、どうやって作るのですか？

4

2 に答える 2

3

この目的のためにのみ使用できます.data():)、次のように：

$("#33").data({title:'User Record','username':'john', 'group_color':'green', 'element_num':78});

注: ID を数字で始めることはできません。例に合わせて無視してください!

値を取得するには:

user_group_color = $('table').find('a').data('group_color');

それでもユーザー名で検索する必要がある場合は、次.filter()のように使用します。

user_group_color = $('table').find('a').filter(function() {
  return $(this).data('username') === 'john';
}).data('group_color');

質問に直接ではありませんが、おそらく時間の節約になります。次のように、これをセレクタにすることもできます。

jQuery.expr[":"].username = function(a, b, m) {
  return jQuery(a).data('username') == m[3];
};

次に、ユーザー名で要素をフェッチすると、次のようになります。

user_group_color = $('table').find('a:username(john)').data('group_color');

パターンが表示されます。これを、フィルタリングする必要がある一般的に使用される属性に使用してください。

于 2010-04-16T20:37:35.747 に答える
0

何らかの理由で他の人が提案したように使用したくない場合はjQuery.data、ID (またはその他の属性) によってデータを要素に関連付けることができない理由はありません。例えば：

HTML:

<span id='foo1'>blah blah blah</span>
<span id='foo2'>blah blah blah</span>

Javascript:

var elementData = {
    foo1: {
       x: 1,
       y: 2
    },
    foo2: {
       x: 3,
       y: 4
    },
};

使用法：

var foo = /* ...get one of the `fooX` elements ... */;
var fooData = elementData[foo.attr('id')];
alert(fooData.x); // alerts 1 or 3 depending on which `foo` you have

オンザフライで新しいデータを追加する:

elementData[newID] = {
   x: 42,
   y: 73
};

オンザフライでのデータの変更:

elementData[theID].x = 27;
于 2010-04-16T21:00:32.820 に答える