jQuery outsideHeight()错误-在版本以下无法正常工作. 1.8.3 [英] jQuery outerHeight() Bug - Doesn't work properly below ver. 1.8.3

问题描述

因此，我有一个脚本可以使x轴上其他元素的高度相等.该脚本很好用...但是仅当我使用jQuery 1.8.3+时.该问题似乎是由于outerHeight()函数引起的.

So I have a script that equalizes the heights of other elements on it's x-axis. The script works great... but only when I'm using jQuery 1.8.3+. The problem seems to be due to the outerHeight() function.

我试图找出1.8.3+对outerHeight()做了什么样的更新，但是运气不怎么好.

I've tried to find out what kind of updates were made to outerHeight() for 1.8.3+ but I haven't had much luck.

请参见小提琴，其中的一切在jQuery 1.8.3下都可以正常工作.

See this fiddle where everything is working fine with jQuery 1.8.3.

此 fiddle 使用jQuery 1.7.2(脚本会中断).

And this fiddle using jQuery 1.7.2 where the script breaks.

任何人都可以帮助解释为什么会发生此问题，并希望能解决我的困境！ (理想情况下，我需要使用它才能适用于jQuery 1.7.1 +)

Can anyone help explain why the problem is happening, and hopefully a solution to my dilemma! (Ideally I need this to work for jQuery 1.7.1+)

有关额外澄清为什么我要使用，当其中一个选择对顶部/底部的保证金或填充不会做的伎俩.明白我的意思> http://jsfiddle.net

For extra clarification as to why I want to use outerHeight(), when one of the selectors has a margin or padding on the the top/bottom height() won't do the trick. See what I mean here > http://jsfiddle.net

谢谢！

推荐答案

为了解决这个需要在不支持jQuery的版本中将setter添加到outerHeight()的问题，我只添加了<

In order to fix this problem of needing to add a setter to outerHeight() in versions of jQuery that didn't already support it, I simply added the following helper provided by jQuery++.

var weird = /button|select/i, //margin is inside border
getBoxes = {},
    checks = {
        width: ["Left", "Right"],
        height: ['Top', 'Bottom'],
        oldOuterHeight: $.fn.outerHeight,
        oldOuterWidth: $.fn.outerWidth,
        oldInnerWidth: $.fn.innerWidth,
        oldInnerHeight: $.fn.innerHeight
    };
/**
* @add jQuery.fn
*/
$.each({

/**
* @function outerWidth
* @parent dimensions
* Lets you set the outer width on an object
* @param {Number} [height]
* @param {Boolean} [includeMargin=false] Makes setting the outerWidth adjust
* for margin. Defaults to false.
*
* $('#hasMargin').outerWidth(50, true);
*
* @return {jQuery|Number} If you are setting the value, returns the jQuery wrapped elements.
*/
width:
/**
* @function innerWidth
* @parent dimensions
* Lets you set the inner height of an object
* @param {Number} [height]
*/
"Width",
/**
* @function outerHeight
* @parent dimensions
* Lets you set the outer height of an object where: <br/>
* <code>outerHeight = height + padding + border + (margin)</code>.
* @codestart
* $("#foo").outerHeight(100); //sets outer height
* $("#foo").outerHeight(100, true); //uses margins
* $("#foo").outerHeight(); //returns outer height
* $("#foo").outerHeight(true); //returns outer height with margins
* @codeend
* When setting the outerHeight, it adjusts the height of the element.
* @param {Number|Boolean} [height] If a number is provided -> sets the outer height of the object.<br/>
* If true is given -> returns the outer height and includes margins.<br/>
* If no value is given -> returns the outer height without margin.
* @param {Boolean} [includeMargin] Makes setting the outerHeight adjust for margin.
* @return {jQuery|Number} If you are setting the value, returns the jQuery wrapped elements.
* Otherwise, returns outerHeight in pixels.
*/
height:
/**
* @function innerHeight
* @parent dimensions
* Lets you set the outer width on an object
* @param {Number} [height]
*/
"Height" }, function(lower, Upper) {

    //used to get the padding and border for an element in a given direction
    getBoxes[lower] = function(el, boxes) {
        var val = 0;
        if (!weird.test(el.nodeName)) {
            //make what to check for ....
            var myChecks = [];
            $.each(checks[lower], function() {
                var direction = this;
                $.each(boxes, function(name, val) {
                    if (val)
                        myChecks.push(name + direction+ (name == 'border' ? "Width" : "") );
                })
            })
            $.each($.curStyles(el, myChecks), function(name, value) {
                val += (parseFloat(value) || 0);
            })
        }
        return val;
    }

    //getter / setter
    $.fn["outer" + Upper] = function(v, margin) {
        var first = this[0];
if (typeof v == 'number') {
            first && this[lower](v - getBoxes[lower](first, {padding: true, border: true, margin: margin}))
            return this;
        } else {
            return first ? checks["oldOuter" + Upper].call(this, v) : null;
        }
    }
    $.fn["inner" + Upper] = function(v) {
        var first = this[0];
if (typeof v == 'number') {
            first&& this[lower](v - getBoxes[lower](first, { padding: true }))
            return this;
        } else {
            return first ? checks["oldInner" + Upper].call(this, v) : null;
        }
    }
    //provides animations
var animate = function(boxes){
return function(fx){
if (fx.state == 0) {
fx.start = $(fx.elem)[lower]();
fx.end = fx.end - getBoxes[lower](fx.elem,boxes);
}
fx.elem.style[lower] = (fx.pos * (fx.end - fx.start) + fx.start) + "px"
}
}
    $.fx.step["outer" + Upper] = animate({padding: true, border: true})

$.fx.step["outer" + Upper+"Margin"] = animate({padding: true, border: true, margin: true})

$.fx.step["inner" + Upper] = animate({padding: true})

})

对此发现感到非常满意！希望它可以帮助其他人.干杯！

Very happy with this find! Hopefully it can help someone else. Cheers!

这篇关于jQuery outsideHeight()错误-在版本以下无法正常工作. 1.8.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！