0

この関数を使用して、Web ベースのモバイル アプリの現在の div に透明な情報のオーバーレイを作成しています。

背景: jQTouch を使用しているため、個々のページが新しく読み込まれるのではなく、個別の div があります。

$(document).ready(function() { 
    $('.infoBtn').click(function() {
        $('#overlay').toggleFade(400);
        return false;    
     });
 });

最初のdivのボタンをクリックすると、JSが順次実行されることを理解すると、関数は正常に機能します。同じボタンをクリックして次の div に移動すると、この div が表示されたときに何も「起こりません」が、最初の div に戻ると、このページで実際にトリガーされます。

したがって、関数を論理的に複製し、CSS セレクター名を変更すると、両方で機能します。

しかし、使用ごとにこれを行う必要がありますか? 同じセレクターを使用して、各バリエーションで異なるコンテンツをロードする方法はありますか?

4

2 に答える 2

0

これを行う最善の方法は、すべてをrelativeにすることです。たとえば、次のようなマークアップがあるとします。

<div class="container">
  <div class="overlay">Overlay content</div>
  <button class="infoBtn">Click to show overlay</button>
</div>

次に、次のように、このボタンのオーバーレイを実際に見つけることができます。

$(function() { //equivalent to $(document).ready(function() {
  $('.infoBtn').click(function() {
    $(this).closest('.container').find('.overlay').toggleFade(400);
    return false;
  });
});

.children('.overlay')オーバーレイが常にコンテナの直接の子である場合など、これをさらに最適化できます。これは、現在のボタン ( this)から移動し、使用中の を検索し、.containerを使用してその内部を.closest()検索します。このアプローチでは、すべてのバインディングを処理するための小さなコードが 1 つあるため、保守がはるかに簡単になります :).overlay.find()

于 2010-06-05T11:54:18.583 に答える
0

このようなものは機能しますか？あなたが望むのは、さまざまなボタンがtoggleFadeさまざまなオーバーレイ div を呼び出すことだと思います。

function makeOverlayHandler(selector) {
    return function() {
        $(selector).toggleFade(400);
        return false;
    }
}

$('button selector').click(makeOverlayHandler('#overlay1'));
$('another button selector').click(makeOverlayHandler('#overlay2'));

makeOverlayHandlerのパラメーターをセレクターではなく jQuery オブジェクトに変更selectorして、次のように呼び出すこともできますmakeOverlayHandler($('#overlay1'))。

于 2010-02-22T20:49:16.843 に答える