5

これはおそらくほとんどの読書の基本ですが、私には理解できないようです.

特定の幅以下の場合に実行したい小さなテスト関数があります。画面が回転したり、その幅を超えてサイズ変更されたりすると、機能が動作しなくなります。簡単にするために、いくつかのサンプルコードを示します。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    }
}).listen();

したがって、ページが 500px を超えて読み込まれる場合、意図したとおりに機能します。クリックしても実行されません。ページが 500px 以下で読み込まれると、クリック機能が実行されます。唯一の問題は、ビューポートのサイズを変更したり、向きを 500px 以上に変更したりしても、関数が引き続き実行されることです。それを無効にできるようにしたいです。

ここで実際にやろうとしている現実世界のシナリオは、4 つのアイテムの順序付けられていないリストがあるということです。特定の幅を超えると、すぐに表示されます。特定の幅以下の場合は、それらを非表示にして、クリックして表示したいだけです。それを行うにはいくつかの方法があることを知っています（.toggle（）、.toggleClass（ "myclass"）など）。

私はこれを何度も行ってきましたが、ブレークポイントに入ったり出たりして、リセットされなかったり、意図したとおりに機能していなかったりすることにいつも悩まされます。通常は問題になりませんが、最近の私のユースケースでは問題になりました。

不一致オプションについては知っていますが、上記の一致した関数を実際に強制終了する方法がわかりません。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    },
    {
        unmatch : function() {
        // what do I do here do kill above?
        }
    }
}).listen();

どんな助けでも大歓迎です。それが私の現在の状況に役立つと確信していますが、他のことについて enquire.js の知識を広げるのにも役立つでしょう。

ありがとう。

編集：言及するのを忘れていました... 500px未満のページを読み込んでから、サイズを変更するか、500pxより広く向きを変えてから、500px未満に戻ると、クリック機能が再び機能しなくなります..これも私を混乱させます. 私は基本的に、500px未満では何があっても機能し、500pxを超えるとまったく機能しないことを望んでいました.

4

1 に答える 1

8

私は enquire.js の作成者ですので、お役に立てれば幸いです ;-)

基本的に、一致時にイベント ハンドラーを追加し、不一致時にイベント ハンドラーを削除します。上記でこれを行う方法の要点があるようですが、構文が少し間違っています。構文が修正されると、クリック ハンドラーを削除するための jQuery の知識が少し必要になります。

それでは、構文がどのようであるべきかを見てみましょう。

enquire.register("screen and (max-width:500px)", {
    match: function() {
        //match code here
    },

    unmatch: function() {
        //unmatch code here
    }
}).listen();

match と unmatch は、 に提供される単一のオブジェクトの一部であることに注意してくださいregister。

理想的には、これをドキュメント準備完了コールバックに入れる必要があります。クリック ハンドラーを割り当てるには、jQuery のonメソッドを使用します。これにより、offメソッドを使用して割り当てを解除できるようになります。

$(".block .block-title").on("click", function() {
    alert("hello");
});

$(".block .block-title").off("click");

これは、イベントに名前を付けることもできるため、素晴らしいことです。詳細については、jQuery のドキュメントを参照してください。したがって、すべてをまとめると、次のようになります。

$(document).ready(function() {

    var $target = $(".block .block-title");

    enquire.register("screen and (max-width:500px)", {
        match: function() {
            $target.on("click", function() {
                alert("Hello World!");
            });
        },
        unmatch: function() {
            $target.off("click");
        }
    }).listen();
});​

ここで実際の例を見つけることができます: http://jsfiddle.net/WickyNilliams/EHKQj/

必要なのはそれだけです:)それが役に立てば幸いです！

于 2012-10-27T12:17:44.540 に答える