jQuery - фрагмент кода, вызывающий проблемы конфликта на страницах, селектор не существует - PullRequest
Новая
       25

jQuery - фрагмент кода, вызывающий проблемы конфликта на страницах, селектор не существует

1 голос
/ 26 июня 2011

Хорошо, поэтому я разрабатываю тему WordPress. На странице одного поста у меня есть div комментариев, который перемещается вниз по странице с помощью некоторого jquery. Я также запускаю модальную всплывающую форму для входа в систему. Это вполне нормально на одной странице, когда существует #commentWrapper (селектор для плавающего эффекта jquery). Однако на страницах, где нет #commentWrapper, модальная форма не работает. Я приписал проблему к этой строке в моем общем вызове jQuery (удалив каждую строку и протестировав).

Звоните в general.js, самый последний звонок: 

jQuery('#commentWrapper').stickyfloat({ duration: 300, easing : 'easeInQuad' });

Фактический плагин это относится к: 

    $.fn.stickyfloat = function(options, lockBottom) {
            var $obj                = this;
            var parentPaddingTop    = parseInt($obj.parent().css('padding-top'));
            var startOffset         = $obj.parent().offset().top;
            var opts                = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

            $obj.css({ position: 'absolute' });

            if(opts.lockBottom){
                var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop; //get the maximum scrollTop value
                if( bottomPos < 0 )
                    bottomPos = 0;
            }

            $(window).scroll(function () { 
                $obj.stop(); // stop all calculations on scroll event

                var pastStartOffset         = $(document).scrollTop() > opts.startOffset;   // check if the window was scrolled down more than the start offset declared.
                var objFartherThanTopPos    = $obj.offset().top > startOffset;  // check if the object is at it's top position (starting point)
                var objBiggerThanWindow     = $obj.outerHeight() < $(window).height();  // if the window size is smaller than the Obj size, then do not animate.

                // if window scrolled down more than startOffset OR obj position is greater than
                // the top position possible (+ offsetY) AND window size must be bigger than Obj size
                if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){ 
                    var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
                    if ( newpos > bottomPos )
                        newpos = bottomPos;
                    if ( $(document).scrollTop() < opts.startOffset ) // if window scrolled < starting offset, then reset Obj position (opts.offsetY);
                        newpos = parentPaddingTop;
                    $obj.animate({ top: newpos }, opts.duration );
                }
            });
        };

Если я добавлю команду if, чтобы посмотреть, существует ли селектор, все это работает. Я хотел бы знать, в чем проблема для будущего веб-сайта.

1 Ответ

1 голос
/ 27 июня 2011

Ваш метод stickyfloat() предполагает много вещей, например, всегда вызывается для объекта jQuery, который содержит хотя бы один элемент, или у этого элемента всегда есть родительский элемент. Например, рассмотрим следующий код: 

var $obj = this;
// ...
var startOffset = $obj.parent().offset().top;

Если объект jQuery, для которого вызывается ваш метод, пуст или если его первый элемент не имеет родителя (метод был вызван $("html")), код завершится ошибкой, поскольку parent().offset() будет null.

Если вы хотите, чтобы ваш метод был более устойчивым, вы не должны предполагать что-либо об объекте, для которого он вызывается. Хороший первый шаг - сделать метод цепным, который всегда будет полезен для ваших пользователей и избавит от первой проблемы. рекомендуемый способ сделать это: 

$.fn.stickyfloat = function(options, lockBottom) {
    return this.each(function() {
        var $obj = $(this);
        // The rest of your code.
    });
};

Поскольку код теперь выполняется последовательно для каждого элемента (если есть) через анонимную функцию, проверка существования родительского элемента может быть решена путем возврата на раннем этапе: 

var $obj = $(this);
var $parent = $obj.parent();
if (!$parent.length) {
    return;  // No parent, continue with next element, if any.
}
// Parent element is safe to use.
var parentPaddingTop = parseInt($parent.css('padding-top'));
var startOffset = $parent.offset().top;
...