jQuery窗口调整大小无法正常工作

Question

伪代码：

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);

});

但是问题在于 ，在第一个页面加载时，一切都执行得很好，但是在调整大小并再次返回时，脚本没有完成他的工作。 同样，每次调整大小时，边栏中的所有内容都会多次输入到占位符中（而不是一次）。

还有我的工作jsfiddle。

我只是不知道我在做什么错。

Answer 1

一些问题：

• 您添加新项目的逻辑始终是正确的（因为您仅检查元素是否存在-它始终存在）。
• 您的孩子支票必须在宽度支票内（单独支票）。
• 您需要再次显示placeHolder div！
• 您在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/

注意：您的代码可以进一步简化，因为您只需要在开始时克隆一次，然后只需切换该面板的可见性即可。

例如

$(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 ）装饰面板，所有这些事情都将由您完成：)

Answer 2

将事件侦听器置于document.ready()函数之外：

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

$(window).resize(checkWidth);

另外，在checkWidth()函数外部取出checkWidth() document.ready()函数。