1

1 つのページに複数のインスタンスを持つことができる jQuery アプリを構築したいと考えています。

ただし、あるインスタンスが他のインスタンスからイベントを受け取るというこの問題に直面しています。たとえば、次のイベントがあるとします。

$('#start_btn').click(...)

ページ上の #start_btn をクリックすると、すべてのインスタンスが開始されます。

では、各インスタンスが独自の HTML コード内の要素とのみ対話するようにコードを設計するにはどうすればよいでしょうか?

更新 - 同じタイプの質問でここにいる場合。これは間違ったアプローチであることがわかりました。jQuery プラグインの設計が最善のアプローチです。

http://learn.jquery.com/plugins/

4

3 に答える 3

2

同じページに同じ ID を持つ 2 つのコントロールを配置しないでください。完全に分離されたページが必要な場合は、各アプリを独自の IFRAME に配置し、独自の完全なコンテキストを使用すると、完全に分離されます。

それは、これらが何をするか、そしてすべてがどれほど大きく複雑であるかにかかっていると思います。

于 2013-07-18T22:01:52.243 に答える
1

ID はドキュメントごとに一意である必要があります。それらを使用しないでください。代わりに、汎用クラス属性を使用して個々のアプリケーションを識別し、これらのインスタンス内のクラスも (再び) アプリケーションの特定の部分を指します。

HTML の例:

<div class="app">
  <a class="start-button" href="#">button1</a>
</div>
<div class="app">
  <a class="start-button" href="#">button2</a>
</div>

上記を仮定すると、スタート ボタンがクリックされたアプリケーションを特定できます。

$('.start-button').click(function(event) {
    var app = $(event.target).closest('.app');
    // Do stuff
});

その特定のアプリケーション内で何かをしたい場合は、appまたは他のトップ参照を使用して、そのアプリ内でのみ変更を保持できます。

たとえば、クリック時にボタンを非表示にします。

$(app, '.start-button').hide();

完全な実行例については、この Fiddle を参照してください: http://jsfiddle.net/8Xtue/2/

ここで紹介するのは、JavaScript アプリケーション フレームワークの単純な基盤です。これがアプリケーションの作成スタイルである場合は、AngularJS ( http://angularjs.org/ ) などの既製のフレームワークを検討することをお勧めします。これは、この種の埋め込み可能な JavaScript を操作するための非常によく考えられたフレームワークを既に提供しています。アプリケーション。

于 2013-07-18T22:01:37.457 に答える
0

コントロールに名前を付けることができます。

ページのコードを投稿すると、この回答を更新できますが、これは次のようになります

<div id="page1">
  <button class=".startBtn">
</div>
<div id="page2">
  <button class=".startBtn">
</div>

次にjqueryで

$("#page1 > .startBtn").click()
$("#page2 > .startBtn").click()

または、直接の親子でない場合

$(".startBtn", "#page1").click()
$(".startBtn", "#page2").click()

ここにいくつかのドキュメントがあります: http://api.jquery.com/child-selector/

注: 通常、DOM 内で ID が重複するのを避けたいため、startBtn を ID ではなくクラスに変更しました。

于 2013-07-18T22:29:27.660 に答える