Jquery 如果div height大于，如何跳过函数

我有一些jQuery限制了某个div的高度，并在下面添加了一个按钮来展开/显示隐藏部分

如果div高度大于我设置的最小高度，

closeHeight

，我只想隐藏div并显示按钮

这是我的代码：

jQuery(document).ready(function() {
    var closeHeight = '20'; /* Default "closed" height */
    var moreText    = 'Read More'; /* Default "Read More" text */
    var lessText    = 'Read Less'; /* Default "Read Less" text */
    var duration    = '1000'; /* Animation duration */
    var easing      = 'linear'; /* Animation easing option */

    // Limit height of bio wrapping div
    jQuery('.single-artist-content .artist-bio-wrap').each(function() {

        var current = jQuery(this).children('.read-more-wrap');

        if (current.height() > closeHeight) {

            // Set data attribute to record original height
            current.data('fullHeight', current.height()).css('height', closeHeight + 'em');

            // Insert "Read More" link
            current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

        } else {
            // Do nothing
        }

    });

// Link functinoality
    var openSlider = function() {
        link = jQuery(this);
        var openHeight = link.prev('.read-more-wrap').data('fullHeight') + 'px';
        link.prev('.read-more-wrap').animate({'height': openHeight}, {duration: duration }, easing);
        link.text(lessText).addClass('open').removeClass('closed');
        link.unbind('click', openSlider);
        link.bind('click', closeSlider);
    }

    var closeSlider = function() {
        link = jQuery(this);
        link.prev('.read-more-wrap').animate({'height': closeHeight + 'em'}, {duration: duration }, easing);
        link.text(moreText).addClass('closed').removeClass('open');
        link.unbind('click');
        link.bind('click', openSlider);
    }

    // Attach link click functionality
    jQuery('.more-link').bind('click', openSlider);

});

jQuery（文档）.ready（函数（）{
var closeHeight='20'；/*默认“closed”高度*/
var moreText='readmore'；/*默认的“readmore”文本*/
var lessText='Read Less'；/*默认的“Read Less”文本*/
变量持续时间='1000'；/*动画持续时间*/
var easing='线性'；/*动画缓和选项*/
//生物包裹舱的极限高度
jQuery（'.single-artist-content.artist-bio-wrap'）。每个（函数（）{
var current=jQuery（this）.children（'.read more wrap'）；
如果（当前.height（）>关闭高度）{
//设置数据属性以记录原始高度
current.data（'fullHeight'，current.height（））.css（'height'，closeHeight+'em'）；
//插入“阅读更多”链接
当前。在（“”）之后；
}否则{
//无所事事
}
});
//链接功能性
var openSlider=函数（）{
link=jQuery（this）；
var openHeight=link.prev（'.read more wrap'）.data（'fullHeight'）+'px'；
link.prev（“.read more wrap”）.animate（{'height'：openHeight}，{duration:duration}，easing）；
link.text（lessText）.addClass（'open'）.removeClass（'closed'）；
link.unbind（'单击'，打开滑块）；
link.bind（'click'，closeSlider）；
}
var closeSlider=函数（）{
link=jQuery（this）；
link.prev（'.read more wrap'）.animate（{'height'：closeHeight+'em'}，{duration:duration}，easing）；
link.text（moreText）.addClass（'closed'）.removeClass（'open'）；
link.unbind（'click'）；
link.bind（'单击'，打开滑块）；
}
//附加链接单击功能
jQuery（'.more link'）.bind（'click'，openSlider）；
});

在我输入实际的条件if（current.height（）>closeHeight）之前，它已经工作了，所以我知道这一定是问题所在，但我不知道为什么

有人能帮我找出我做错了什么吗？谢谢

编辑：上面的代码使用正确的答案进行了编辑。

请注意，.height（）获取计算的高度，而不是像“20em”那样的字符串。因此，您的比较甚至可能失败，并且可能返回到false

if条件将失败

我建议改为使用引导或其他响应框架，但如果您仍然想坚持这种方法，请比较类似的属性，例如设置一个隐藏div的高度，然后比较两个div的高度

第一步。创建隐藏的div，将其高度设置为“20em”

第二步。将第一个div的高度与隐藏div的高度进行比较

函数

height（）

返回一个没有单位的像素数。但是，您将其与永远不匹配的

20em

进行比较。此外，还将整数（从

height（）

返回）与字符串（

20em

）进行比较

找出20em的像素高度的一种方法是创建一个伪对象，将其设置为20em，然后获取该元素的实际高度（）

jQuery（文档）.ready（函数（）{
var closeHeight='20em'；/*默认“closed”高度*/
var moreText='readmore'；/*默认的“readmore”文本*/
var lessText='Read Less'；/*默认的“Read Less”文本*/
变量持续时间='1000'；/*动画持续时间*/
var easing='线性'；/*动画缓和选项*/
//您可以在此处确定closeHeight值：
$fakeEl=jQuery（“”）.height（closeHeight）；//将元素设置为closeHeight 20em
closeHeight=$fakeEl.height（）；//将closeHeight设置为以像素为单位的整数
$fakeEl.remove（）；//可能没有必要，因为您从未将其附加到DOM中。
//生物包裹舱的极限高度
jQuery（'.single-artist-content.artist-bio-wrap'）。每个（函数（）{
var current=jQuery（this）.children（'.read more wrap'）；
如果（当前.height（）>关闭高度）{
//设置数据属性以记录原始高度
current.data（'fullHeight'，current.height（））.css（'height'，closeHeight）；
//插入“阅读更多”链接
当前。在（“”）之后；
}否则{
//无所事事
}
});
//链接功能性
var openSlider=函数（）{
link=jQuery（this）；
var openHeight=link.prev（'.read more wrap'）.data（'fullHeight'）+'px'；
link.prev（“.read more wrap”）.animate（{'height'：openHeight}，{duration:duration}，easing）；
link.text（lessText）.addClass（'open'）.removeClass（'closed'）；
link.unbind（'单击'，打开滑块）；
link.bind（'click'，closeSlider）；
}
var closeSlider=函数（）{
link=jQuery（this）；
link.prev（“.read more wrap”）.animate（{'height'：closeHeight}，{duration:duration}，easing）；
link.text（moreText）.addClass（'closed'）.removeClass（'open'）；
link.unbind（'click'）；
link.bind（'单击'，打开滑块）；
}
//附加链接单击功能
jQuery（'.more link'）.bind（'click'，openSlider）；
});

在要跳过的函数中，首先检查宽度，如果大于我设置的最小高度，只需调用

return

结束函数调用您正在比较苹果和桔子。也就是说，

if（500>'20em'）{…}

。我认为这可以归结为一个事实，即你的closeHeight是一个字符串。所以你是在比较一个字符串和一个数字。编辑：Daerik打败了我it@Daerik我也注意到了。上面编辑了我的代码。看起来是这样的。必须确保'em'不在

closeHeight

变量中，并将'em'字符串添加到有条件跳过的函数和

closeSlider

函数中。有限公司