0

else / if ブレークポイントで要素が同じインライン スタイルを保持するのをどのように防止するのか疑問に思っています。

私がやっていることは、ウィンドウの幅に基づいてスタイルを変更しようとしています。数値をインクリメントする必要があることを除けば、CSS メディア クエリとほぼ同じアプローチです。これは CSS では実行できないため、jQuery を使用します。

最後の else if (最初の 5 つの記事に不透明度を適用する場所) に到達すると、ブラウザのサイズを 720px 未満に戻すと、これらの記事は不透明度を保持しますが、これは望ましくありません。

どんな助けでも大歓迎です。

$(document).ready(function() {
    function checkWidth() {
        var windowSize = $(window).width();
        if (windowSize >= 1 && windowSize <= 479) {
            var posTop = 0;
            $('#main article').each(function() {
                $(this).css('top', posTop + 'px');
                posTop += 160;
            });
        } else if (windowSize >= 480 && windowSize <= 719) {
            var posTop = 0;
            $('#main article').each(function() {
                $(this).css('top', posTop + 'px');
                posTop += 240;
            });
        } else if (windowSize >= 720 && windowSize <= 959) {
            $('#main article').slice(0, 5).each(function() {
                $(this).css('opacity', 0.4);
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});​
4

1 に答える 1

0

$('#main article').css('opacity', 1);関数の先頭に追加しcheckWidthます。ところで、この関数の名前を変更する必要があります。これが行うことは、それがどのように聞こえるかではないからです。posTopそして、変数と最後のeachループには必要ありません。いくつかのリファクタリングを伴う私のバリアント:

$(document).ready(function() {
    function changeStylesDependsOnWidth() {
        $('#main article').css('opacity', 1);

        var windowSize = $(window).width();

        if (windowSize >= 1 && windowSize <= 479) {
            $('#main article').each(function(i) {
                $(this).css('top', i * 160 + 'px');
            });
        } else if (windowSize >= 480 && windowSize <= 719) {
            $('#main article').each(function(i) {
                $(this).css('top', i * 240 + 'px');
            });
        } else if (windowSize >= 720 && windowSize <= 959) {
            $('#main article').slice(0, 5).css('opacity', 0.4);
        }
    }

    changeStylesDependsOnWidth();
    $(window).resize(changeStylesDependsOnWidth);
});​
于 2012-08-23T15:25:15.693 に答える