1

メディアクエリを使用してdivの幅を調整しています。そのdivが幅を変更したときに反応するページが必要です。

ただし、これを使用.resizeした場合、トリガーが2回発生し、ユーザーがさらにdivを操作すると問題が発生します。.live()ユーザーが目的の効果を達成するために対話する必要があるため、使用できません。最後に、私は調査しましDOMSubtreeModifiedたが、それは減価償却されました。

簡単に言えば、これが私がやりたいことです。

$('#element').watchForChange(function(){
     *...do stuff here when the change happens...*
});

ご協力いただきありがとうございます。

- - - 編集 - - - -

この例で、サイズ変更でよく見られる問題を明確にしましょう。

<div id="box"></div>
<span id="button">Open</span>

上記の例では、#boxが400x400で、「オープン」状態であると想定してい(display:block)ます。ウィンドウのサイズが800pxに変更されたら、ボックスを閉じます（display：none）。「開く」ボタンはjqueryを使用してボックスを再度開きます($('#button').click(function(){...});)

私が歌い続ける問題は、「開く」をクリックすると、ボックスが開いてから閉じることです。2回目のクリックは正常に機能します。

Jqueryは、イベントハンドラーで2番目の呼び出しを保持しています。サイズをもう一度確認する必要があるため、バインドを解除できません。

オープンクローズ機能を使用していません。むしろ、スライダーの次のボタンを使用しています。そのサイズ変更時にアイテムを最初にリセットする必要があります。問題なくリセットできます。問題は、「次へ」を2回クリックするとリセットされるということです。

4

2 に答える 2

4

ここにあるテクニックを使用して：

JQuery:サイズ変更が完了したときにのみRESIZEイベントを呼び出す方法は?

http://jsfiddle.net/Zevan/c9UE5/1/

var id;
$('#element').resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 500);

});

function doneResizing(){
    // do something
    console.log("done resizing");
}​

イベントは複数回発生しますが、doneResizing 関数は、最後のイベントが発生してから 500 ミリ秒後にのみ呼び出されます。もちろん、必要に応じてその数を調整できます。

于 2012-11-01T03:37:38.243 に答える
0

OK - 編集した質問に基づいて、ここに問題があります。トグル機能は、最後のクリックで実行した機能を追跡し、次のクリックで常に他の機能を実行します。したがって、一度クリックすると最初の機能が実行され、もう一度クリックすると 2 番目の機能が実行され、最初の機能に戻るというように続きます。

ただし、ウィンドウのサイズ変更イベントはウィンドウを折りたたんでいるため、最後に h1 をクリックして展開する場合は、次のクリックでトグルがウィンドウを閉じようとします。したがって、ウィンドウのサイズ変更イベントが閉じてから、ボタンが再び閉じています。そのため、ウィンドウのサイズ変更後に最初にボタンをクリックしたときに結果が表示されません。

トグルを使用せず、代わりに状態変数を使用するようにコードを変更しました。

http://jsfiddle.net/SVy6m/1/

var target;
var isCollapsed = true;

$('h1').click(function() {
    if(isCollapsed) {
        $('.box-1').slideDown();
    } else {
        $('.box-1').slideUp();   
    }
    isCollapsed = !isCollapsed;
});   


var id;
$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 10);

});

function doneResizing(){
    // do something
    $('.box-1').slideUp();
    isCollapsed = true;
}    ​

ウィンドウ サイズが 800 未満かどうかを確認するコードを追加する必要があります。

于 2012-11-01T05:34:51.040 に答える