jQuery-一段在选择器没有的页面上导致冲突问题的代码'不存在

jQuery - piece of code causing conflict problems on pages the selector doesn't exist

本文关键字：冲突 问题 代码 不存在 一段 选择器 jQuery-      更新时间：2023-09-26

好吧，我正在开发一个WordPress主题。在单个post页面上，我有一个commentsdiv，它使用一些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命令来查看选择器是否存在，那么一切都可以。然而，我想知道未来网站的问题是什么。

好吧，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;
相关文章：