0

以下のjQueryのこのスニペットで何が起こっている可能性があるかを誰かが私に説明できますか？

        var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });
        tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);
        tileDiv.data(this);

私にはtileDiv、2つの値が含まれるjQueryオブジェクトと<div/>コンマの後の2番目のビットに設定されているように見えます。tileDiv.data(this)ただし、通話で何が起こっているのか100％確実ではありません。説明または最良の推測をありがとう。

4

4 に答える 4

1

最初の行は、新しいdivを作成し、属性idとclass属性を設定してから、divの内部テキストを設定します。

2行目は、上部の境界線のスタイルを設定します。

3行目は、オブジェクトのすべてのプロパティに等しいデータを新しいdivに添付します。これは、コンストラクターthisを介して作成されたJavascriptオブジェクトですnew Somethingが、プレーンオブジェクトの場合もあります。

したがって、の場合this.answer = 42、3行目が実行された後の結果tileDiv.data("answer")も42になります。

のすべてのプロパティをコピーするのは少しもったいないようです。代わりthisに言う方がよいかもしれませんが、コードを追加しないとわかりません。tileDiv.data("tileInfo", this)

于 2012-04-11T16:22:10.670 に答える
1

このコードはdiv、2 番目の引数で渡されたプロパティを使用して新しい を作成し、jQuery オブジェクトを に格納していますtileDiv。

var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });

border-top次に、 CSS プロパティを追加します。

tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);

最後の行については、この.data関数を使用して、その jQuery オブジェクトに関連付けられたデータを保存および取得できます。また、要素の HTML5data-属性から情報を取得するためにも使用できます。この場合、 のすべてのメンバーがのデータthisに格納されtileDivます。あなたが持っていた場合：

this.someData = 99;
this.otherData = 87;
tileDiv.data(this);

次に、この jsFiddleでわかるように、tileDiv.data('someData')99を返し、87 を返します。tileDiv.data('otherData')

ここで jQuery のドキュメントを参照してください.data: .datajQuery API。

于 2012-04-11T16:14:39.640 に答える
1

Data は、メタデータを DOM オブジェクトに格納する JQuery コマンドです: http://api.jquery.com/data/ データは好きなものです。次のようにデータを追加します。

tileDiv.data(key, object_with_data)

次のように取得します。

var tileDiv.data(key);

ええ、上記はデータを取得しているように見えますが、何もしていません。

于 2012-04-11T16:15:47.720 に答える
1

dataHTML 属性の HTML 5 プレフィックスです。コンテキストが "hello" のような基本的な文字列であることがわかっている場合this、jQuery は HTML 属性という名前の属性を取得しようとしますdata-hello。しかし、ご覧のとおり、オブジェクトにはそのような属性がないため、何も起こっていません。

書き込みに等しい

 $(titleDiv).attr("data-" + this)
于 2012-04-11T16:19:54.703 に答える