变量返回 [object HTMLParagraphElement]

Question

我在处理 jQuery 中的变量时遇到了困难。 var 需要返回窗口的宽度。 为了测试这一点，我编写了一些代码，当我点击按钮时，宽度会显示在段落中：

var update = function() {
  width = $(window).width();
}

$(document).ready(
  function() {
    $('button').click(
      function() {
        update,
        $('#width').text(width)
      }
    )
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="width">Width</p>
<button>test</button>

我得到“[object HTMLParagraphElement]”而不是宽度的值。 我不明白为什么，因为当我运行这段代码时：

var width = $(window).width();

$(document).ready(
    function () {
        $('button').click(
            function () {
                $('#width').text(width)
            }
        )
    }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="width">Width</p>
<button>test</button>

我确实毫无问题地获得了价值。但是这样我在调整窗口大小后无法更新变量（我认为是因为该变量仅在页面加载时声明。）

这可能是一个真正的新手问题，但我非常渴望学习......

Answer 1

带有ids 的“命名”元素作为document 的属性添加。 这就是为什么当你之前调用width 时，如果你没有这个元素，它应该是undefined

<p id="width">Width</p>

由于你有这个元素，width 默认为[object HTMLParagraphElement]

见Do DOM tree elements with ids become global variables?

另外，您需要使用() 致电update

var update = function() {
  return $(window).width();
}

$(document).ready(
  function() {
    $('button').click(
      function() {
        var width = update();
        $('#width').text(width)
      }
    )
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="width">Width</p>
<button>test</button>

注意，上面返回的是一个值，而不是使用/分配一个全局变量width。这是避免反模式的更好做法。