3

私はこのコードを機能させていますが、私には不格好に思えます。単純化する方法はありますか？その要点は、ページが読み込まれるときにページ幅をチェックし、それに基づいてdivを表示または非表示にすることです（ブラウザーが480ピクセルより広いか細いかに基づいて）。次に、ユーザーがブラウザウィンドウのサイズを変更した場合は、幅をもう一度確認して、適切なdivを表示/非表示にします。とにかく、これはjqueryまたは単にjsで単純化できますか？

function pageWidth() {
        return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    //Show/hide the correct div when the page loads
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
    // Show/hide the correct dropdown when the browser window is resized
    $(window).resize(function() {
        if (pageWidth() >= 480) {
            $(".siteSearchDropdown").css("display", "none");
            $(".siteSearchSelect").css("display", "block");
        }
        if (pageWidth() < 480) {
            $(".siteSearchDropdown").css("display", "block");
            $(".siteSearchSelect").css("display", "none");
        }
    });
4

4 に答える 4

4

コードを2回記述するのではなく、window.resizeイベントハンドラー内に1回記述してから、要素でresizeイベントをトリガーします。window

$(window).resize(function() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").css("display", "none");
        $(".siteSearchSelect").css("display", "block");
    }
    if (pageWidth() < 480) {
        $(".siteSearchDropdown").css("display", "block");
        $(".siteSearchSelect").css("display", "none");
    }
}).trigger('resize');

また、このコードは誰かがブラウザのサイズを変更すると何度も実行されるため、セレクタをキャッシュしてコードを最適化する必要があります。

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    }
    if (pageWidth() < 480) {
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');

注：resizeブラウザーのサイズが変更されたときに、イベントハンドラーコードが何度も実行される方法について説明しました。これを自分でテストするには、このコードをページに追加して、開発者コンソールが飛ぶのを見てください。

$(window).resize(function (e) {
    console.log(e);
});

コードをもう一度確認した後、関数を2回if/else実行するのではなく、ステートメントを使用してさらに最適化できます。pageWidth()

var $siteSearchDrioopdown = $(".siteSearchDropdown"),
    $siteSearchSelect     = $(".siteSearchSelect");
$(window).resize(function() {
    if (pageWidth() >= 480) {
        $siteSearchDrioopdown.css("display", "none");
        $siteSearchSelect.css("display", "block");
    } else {//notice the change in structure so the `pageWidth()` function is only called once
        $siteSearchDrioopdown.css("display", "block");
        $siteSearchSelect.css("display", "none");
    }
}).trigger('resize');
于 2011-12-12T19:54:54.123 に答える
2

CSS3互換のブラウザをターゲットにできる場合は、メディアクエリを確認する必要があります。または、古いブラウザに同じ機能を提供するRespondなどのJavaScriptライブラリがあります。

于 2011-12-12T19:59:41.057 に答える
2

何かのようなもの：

function pageWidth() {
    return window.innerWidth || document.body.clientWidth;
}

function reconfig() {
    if (pageWidth() >= 480) {
        $(".siteSearchDropdown").hide();
        $(".siteSearchSelect").show();
    } else {
        $(".siteSearchDropdown").show();
        $(".siteSearchSelect").hide();
    }
}

$(window).resize(reconfig);

reconfig();
于 2011-12-12T20:03:14.370 に答える
1

関数は必要ありません。pageWidth()使用するだけ$(window).width()です。また、divを表示/非表示にするためにコードを複製する必要はなく、それを実行する関数を作成します。

function showHide() {
  var isBigLayout = $(window).width() > 480;
  $(".siteSearchDropdown").css("display", isBigLayout ? "none" : "block");
  $(".siteSearchSelect").css("display", isBigLayout ?  "block" : "none");
}


$(window).resize(showHide); //Run when resized
showHide(); // Run initially, or $(showHide) to run after DOM is loaded
于 2011-12-12T19:58:56.003 に答える