0

擬似コード:

  1. ウィンドウ サイズが 768 以上の場合、#sidebar からコンテンツを取得し、プレースホルダー div に入力します。
  2. ウィンドウ サイズが 768 未満の場合は、上記を実行しないでください。

私のjQueryコードは次のとおりです。

$(document).ready(function () {

    var $window = $(window);

    function checkWidth() {
        //set main vars
        var windowsize = $window.width();
        var $sideBarContent = $('#sidebar .dummy-content');
        var $placeHolder = $('#place-holder');

        //perform the main check
        if (windowsize >= 768 && $('#place-holder').length) {
            $($sideBarContent).clone(true)
                .appendTo($($placeHolder));
        }
        else {
            $($placeHolder).hide();
        }
    }

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);

});

しかし、問題は、最初のページの読み込みではすべてがうまく実行されますが、サイズを変更して再び元に戻すと、スクリプトが機能していないことです。また、サイドバーのすべてのコンテンツのサイズを変更するたびに、プレースホルダーに (1 回ではなく) 数回入力されます。

そして私の作業中のjsfiddle。

私は自分が間違っていることを知りません。

4

2 に答える 2

1

いくつかの問題:

  • 新しいアイテムを追加するロジックは常に true です (要素が存在するかどうかのみを確認するため、常に存在します)。
  • 子チェックは、幅チェック (別のチェック) の内側にある必要があります。
  • placeHolderdiv をもう一度表示する必要があります。
  • $()jQuery変数の周りに冗長性があります
  • 必要なすべての要素に対して jQuery 変数がありますが、それらを使用しない場合があります。

例えば

$(document).ready(function () {

    var $window = $(window);

    function checkWidth() {
        //set main vars
        var windowsize = $window.width();
        var $sideBarContent = $('#sidebar .dummy-content');
        var $placeHolder = $('#place-holder');

        //perform the main check
        if (windowsize >= 768) {
            if (!$placeHolder.children().length) {
                $sideBarContent.clone(true)
                    .appendTo($placeHolder);
            }
            $placeHolder.show();
        } else {
            $placeHolder.hide();
        }
    }

    // Bind event listener and do initial execute
    $window.resize(checkWidth).trigger("resize");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/8/

注: 開始時に 1 回クローンを作成し、そのパネルの表示を切り替えるだけでよいため、コードをさらに簡素化できます。

例えば

$(document).ready(function () {

    var $window = $(window);
    var $sideBarContent = $('#sidebar .dummy-content');
    var $placeHolder = $('#place-holder');

    function checkWidth() {
        $placeHolder.toggle($window.width() >= 768);
    }

    // Clone at start - then hide it    
    $sideBarContent.clone(true).appendTo($placeHolder);

    // Bind event listener and do initial execute
    $window.resize(checkWidth).trigger("resize");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/6/

繰り返しますが、これは短縮できます。

$(function () {
    var $window = $(window);
    var $sideBarContent = $('#sidebar .dummy-content');
    var $placeHolder = $('#place-holder');

    // Clone content at start - then hide it 
    $sideBarContent.clone(true).appendTo($placeHolder);

    // Bind event listener and do initial execute
    $window.resize(function(){
        $placeHolder.toggle($window.width() >= 768)
    }).trigger("resize");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/7/

それは今のところすべてです ：）

最後のポイント:

Twitter ブートストラップを使用している場合は、パネルを適切なクラス ( のようなものvisible-md) で装飾するだけで、これがすべて行われます :)

于 2015-04-21T10:39:12.590 に答える
0

document.ready()関数の外でイベント リスナーを取得します。

$(document).ready(function(){
    ...
});

$(window).resize(checkWidth);

checkWidth()また、関数の外に関数を取り出しdocument.ready()ます。

于 2015-04-21T10:33:26.103 に答える