Изменение размера окна 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() функционировать вне document.ready() функция.