1

皆さんと経験を共有したいだけです。だから私の問題は、javascript バックエンド オブジェクトを HTML フロントエンド要素にバインドするという問題に遭遇したことでした。今、私はグーグルで検索し、この問題に関するいくつかのスタックオーバーフローの記事を読みました。これに対する多くの投稿の回答はjQuery.data()を使用することですが、最初の試みでは、jQuery について知らなかったことがあったため、成功しませんでした。オブジェクトの作成方法。私の問題は、これを保存したスコープ外に保存されたデータを取得したかったことでした.jQuery（ 'selectorID'）を書くと、jQueryは常に新しいオブジェクト参照を返します。たとえば、次のようになります。

var ref1 = $('#myID');
var ref2 = $('#myID');

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

常に false を警告します。ただし、jQuery メソッドを JavaScript の組み込みgetElementById()に置き換えると、同じ参照が得られます。したがって、次のコードは常に true を警告します!

var ref1 = document.getElementById("myID");
var ref2 = document.getElementById("myID");

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

私の話のちょっとした教訓は、 javascript オブジェクトを HTML 要素にグローバルにバインドしたい場合、jQuery の data() メソッドの使用を考えている場合は、javascript の組み込みgetElementById()によって返される参照にデータを保存することです。そうすれば、getElementByIDを使用して参照をどこから取得しても、常に同じ参照が取得され、jQuery の data() メソッドを使用してそこからデータを取得できます。

私の質問:

  1. 私の思考の論理は大丈夫ですか？
  2. JavaScriptオブジェクトをHTML要素にグローバルにバインドするより良い方法はありますか?
4

4 に答える 4

2

あなたが言及したコードが機能しない理由が何であれ、jQuery がクエリごとに新しいコレクションを提供するという事実ではありませんでした。HTML を考えると:

<div id="somediv"> foo bar </div>

次の Javascriptは期待どおりに動作します。

var $ref1 = $('#somediv');
var $ref2 = $('#somediv');

console.log("$ref1:", $ref1);
console.log("$ref2:", $ref2);

// compare the collections / references
console.log("$ref1 == $ref2:", $ref1 == $ref2); // => false
console.log("$ref1 === $ref2", $ref1 === $ref2); // => false

// compare the referred DOM elements themselves
console.log("$ref1[0] == $ref2[0]:", $ref1[0] == $ref2[0]); // => true
console.log("$ref1[0] === $ref2[0]", $ref1[0] === $ref2[0]); // => true


$ref1.data('somedata', 'SOMEDATA');
console.log('$ref1->somedata:', $ref1.data('somedata')); // => SOMEDATA
console.log('$ref2->somedata:', $ref2.data('somedata')); // => SOMEDATA
于 2013-03-11T00:25:09.437 に答える
0

私のやり方はこんな感じです。

var ref1 = $('a');
var ref2 = $('div');

var equal = ref1.length === ref2.length;
if (equal) {
    $.each(ref1, function(i) {
        equal = equal && ref1[i] === ref2[i];

        if (!equal) {
            return false;
        }
    });
}

if (equal) {
    alert(true);
} else {
    alert(false);
}
于 2013-03-10T13:00:21.050 に答える
0 
ref1[0] === ref2[0] // Should return true

jQueryのインスタンスは一意であると思うので、一致したアイテムを比較できます。これは、IDを参照するときに1つの要素にすぎないはずです。

あなたはこのようなことをすることができます：

var ref1 = $('#myID')[0];
var ref2 = $('#myID')[0];
于 2013-03-10T13:06:29.197 に答える
-1

jQuery のソース コードに飛び込んで、jQuery のコンストラクターを見つけます。次のように:

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

ref2 = $('#myID')を使用して対応する jQuery 要素を取得するたびに、jQuery は新しいオブジェクトを作成します。したがって、==この 2 つの要素は js オブジェクト エンジンとはまったく異なりますので、false が返されます。

メソッドgetElementByIdの方がニーズに合っているようです。getElementByIdしかし、jsエンジンがそのメソッドをどのように実行するかはわかりません。

于 2013-03-10T13:18:44.773 に答える