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。这是避免反模式的更好做法。

变量返回[object HTMLParagraphElement]

1 个答案: