0

メディア クエリを使用して、特定のブラウザ幅でフロートを無効にしようとしています。この if ステートメントは、現在のサイズでページをリロードした場合にのみ機能します。CSSプロパティが変更されたときにjQueryに変更を適用させることは可能ですか?

if($('.two-column li').css('float') == 'left') {
    $('.two-column li').equalHeights();
}

おそらく、2番目の $('.two-column li') で $(this) または何かを使用することになっていますが、なぜ機能しないのかわかりません。jQueryについてはよくわかりません。

編集：

デフォルトでは、2 列の li のスタイルは次のようになります。

.two-column li {
    float: left;
}

そして、言ってみましょう...

@media only screen and (max-width: 767px) {
    .two-column li {
        float: none;
    }
}

これは機能します。横幅が 767px 以下になると浮きなくなります。上記の醜いjqueryは部分的に機能しているようです。デフォルトでは equalheights プラグインが実行されますが、幅が 767px 未満の場合、プラグインは実行されません。私の問題は、それが実行されるかどうかは、ページが読み込まれたときのブラウザーのサイズに依存することです。レスポンシブ デザインのメディア クエリのように動的にしようとしています。

そして、ドキュメントの準備ができたときにそれを呼び出しました。

より多くの調査と以下のコメントの助けを借りて、現在、ドキュメントの準備ができていることを含め、このようになっています...ただし、サイズ変更ではまだ実行していません。更新が必要です。

$(document).ready(function () {
    $('.two-column li').filter(function(index) {
        return $(this).css('float') != 'none'
    }).equalHeights();
});
4

4 に答える 4

1

modernizr は、メディア クエリのテストを提供します。さらに、イベント ハンドラーをアタッチすることもできます。$(window).resize()

于 2011-06-20T03:27:55.027 に答える
0

これを使用して行うことができます$(window).resize()

$('div#first').addClass("right");

$(window).resize(function() {

    $('#first').toggleClass("right", $(this).width() > '500');

});
  1. divが でクラスを取得することを確認するfloatため、サイズ変更関数の外に追加します。
  2. ウィンドウのサイズが変更されたときに、ウィンドウのサイズに基づいてクラスのオンとオフを切り替えます (つまり、フロートまたはフロートなし)。この場合、window が 500px を超えるとトグルが発生します。逆に小さい場合は、クラスを削除します。
  3. 幅を好きなように設定します。

http://jsfiddle.net/jasongennaro/7qc8e/3/

ウィンドウのサイズを変更して動作を確認します。

于 2011-06-20T04:30:19.357 に答える
0

わかりました..より多くの研究といくつかのいじりの後、私は私が望む機能を持っているようです. 適切なjQueryコードを書くことはできませんが、よりエレガントにするために私が間違っていることを教えてもらえますか?

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});
于 2011-06-20T19:29:06.797 に答える
0

貼り付けたサンプル コードは少しずれており、期待どおりに動作しません。操作する必要があるのは、操作するすべての要素を選択し、float スタイルの値に基づいてそれらをフィルター処理することです。次に、フィルタリング後、必要な操作をフィルタリングされたセットに適用します。たとえば、float が「left」に設定されているすべての「.two-column li」要素のセットで equalHeights プラグインを実行する場合は、次のコードを試してください。

$('.two-column li').filter(function(index) {
    if($(this).css('float') == 'left') return true;
}).equalHeights();

そうは言っても、問題の根本は、ブラウザーのサイズが変更されたときに CSS メディア クエリが適切にアクティブ化されていないことにあるようです。メディアクエリコードを投稿して、もっと簡単な解決策があるかどうかを確認していただけますか?

于 2011-06-20T03:30:41.733 に答える