JQuery，函数内部的变量无法被动作识别答案

【问题标题】：JQuery, variable inside function not recognized by actionJQuery，函数内部的变量无法被动作识别
【发布时间】：2015-11-24 02:56:12
【问题描述】：

首先，让大家知道我在 jQuery 方面是完全 n00b 的。

其次，我在任何地方都找不到有关此问题的任何具体信息，这就是我现在终于发布此问题的原因。

最后，我遇到的这个问题令人难以置信的奇怪和令人沮丧的事情是，我会让代码正常工作，然后离开我的电脑做点别的事情，当我突然回来时代码不再有效。

这是我存储在外部文件中并从 HTML 引用的代码：

    var adjPad = (function() {
        var ht = $('#contactinfo').height();
        $('.content p:last').css({'padding-bottom':ht});
    });

    $(document).ready(function(){adjPad();});
    $(window).resize(function(){adjPad();});

这不会做任何事情，就好像变量 ht 不存在一样。

但是，如果我将 'padding-bottom' 的值更改为 XYZ + 'px'，代码确实会识别该值并调整相应地填充。

我非常困惑。任何帮助将不胜感激！

根据要求，这里是所有相关的 HTML：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="base.js"></script>
...
   <div class="content">
      <h1>HISTORY</h1>
      <p></p>
   </div>
...
   <div id="contactinfo">
      <div id="contactinfocontainer">
         <div id="left">
            <ul>
               <li></li>
            </ul>
         </div>
...
      </div>
   </div>
...

感谢到目前为止的所有回复！

已解决！

问题在于跨浏览器的兼容性。

'margin-bottom' 适用于 Chrome。

'padding-bottom' 适用于 Edge、Firefox 和 Waterfox。

编码愉快！

【问题讨论】：

打印ht的值到控制台，它说什么？另外，您是否尝试过 ht + 'px'
我在 jsFiddle 中运行了他的代码，它记录了正确的高度，只需尝试@EricGuan 所说的并添加 ht + 'px'。
您能否将相关的HTML 添加到您的问题中，以便在您的 jQuery 不正确匹配的情况下，我们可以确切地看到可能出现的问题？
我也尝试过使用 ht + XYZ + 'px'，它只识别 XYZpx。抱歉，我不知道如何从控制台打印 ht 的值，但我会在吃完这个蒜蓉面包后立即学习如何做到这一点:)跨度>
添加这一行：console.log(ht);

标签： javascript jquery css function methods

【解决方案1】：

jquery height 方法以数字返回高度。

var ht = $('#contactinfo').height(); //returns height in number

但是您的填充值需要在px 中，因此将代码更改为以下行，它应该可以工作：

$('.content p:last').css({'padding-bottom':ht+'px'});

【讨论】：

每个人都在指出，您确实应该通过指定ht + 'px' 来声明您请求的单位。但是，默认情况下 jQuery 假定您指的是像素，所以这不是您的问题（但仍然要指定您的单位）。 jsfiddle.net/m0q0r9wy
@jpschroeder 我正在寻找 % 输出，因为 #contactinfo 的高度是 %，因此我希望 padding-bottom 也是 %。
好吧，小心点。在 CSS 中，填充 % 是基于元素的 width 的，而您的 p:last 的百分比将与其父级相关，这与 #contactinfo 的父级不同。我很确定您确实在寻找 px 值。
所以你应该早点告诉它......然后你只需要阅读 css $( ).css('height');
@jpschroeder 是的，实际上，我的错。我正在吃饭，所以我真的无法专注于我的反应。输出是哪个单位实际上并不重要，但 pixel 输出就足够了。此外，我使用命令 console.log(ht); 打印了 ht 的定义，浏览器响应如下： Uncaught ReferenceError: ht is not defined （匿名函数）

【解决方案2】：

很久没有使用 jQuery，但我认为 height() 会给你一个数字。

所以尝试通过ht+'px'

因为 css 旨在由字符串组成。

Furtermore jQuery.height() 为您提供解析后的 css 高度，因此如果您在样式表中使用 % ，则会出现错误。在这种情况下，请考虑获取对象边界框并从那里获取高度。

这应该是BB的获取方法。

$(...).getBoundingBox().height()

JQuery 在线解析 CSS，因此会给你带来 % 的问题，并且对不同的浏览器很敏感，并且 .height() 仅在文档生成然后消失时才可用。 BB 直接与将 % 转换为 px 并在页面中排列元素的渲染引擎交互。所以这总是会给你任何物体的真实位置。（在浏览器内）

【讨论】：

我已经试过了。不幸的是没有骰子！实际上，#contactinfo 的 height 是 %，但尽管如此，我已经让 jQ 代码工作了。我不知道为什么它总是在我身上随机出现。对象边界框？！感谢您的回复！

【解决方案3】：

问题在于跨浏览器的兼容性。

'margin-bottom' 适用于 Chrome。

'padding-bottom' 适用于 Edge、Firefox 和 Waterfox。

我希望这对将来的某人有所帮助:)

【讨论】：