javascript - JQuery， Action 无法识别函数内部的变量

Question

首先，让大家知道我完全掌握了 jQuery。

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

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

这是我存储在外部文件中并从 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。

编码愉快!

Answer 1

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

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

但您的填充值需要以 px 为单位，因此将代码更改为以下行，它应该可以工作:

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