Question

在尝试使用JQuery加载功能加载content div之后，我尝试垂直缩放手风琴面板的尺寸，但是该面板在函数内部未定义。有什么问题吗？

$(panel).load(url, data, function (result) {
    $(panel).style.maxHeight = $(panel).scrollHeight + "px";
});

Answer 1

您的代码中有几个问题

$(panel).style.maxHeight

无效，因为$()是jQuery对象，没有style属性。您可以通过执行$().get(0)或$()[0]或直接使用this来访问JS的元素。

$(panel)（在您的特定情况下）仅在您执行var panel = "#panel"之前有效。
而且，您应该确保自己已经准备好文档，或者将代码放置在结束</body>标记之前。

这里是翻拍：

jQuery(function($) { // DOM ready and $ alias in scope

  var url = "foobar.html";
  var data = {};
  var $panel = $("#panel"); // cache your selectors

  $panel.load(url, data, function(result) {
    $(this).css("max-height", $(this).prop("scrollHeight") );
  });

});

或者-使用JS的this（元素引用对象）

jQuery(function($) { // DOM ready and $ alias in scope

  var url = "foobar.html",
      data = {},
      $panel = $("#panel");

  $panel.load(url, data, function(result) {
    this.style.maxHeight = this.scrollHeight;
  });

});

在function内，您可以使用$panel来引用$(this)。
如果您使用 ES6语法和箭头功能，则可以使用缓存的$panel参考：

jQuery($ => { // DOM ready and $ alias in scope

  const url = "foobar.html",
    data = {},
    $panel = $("#panel");

  $panel.load(url, data, result => {
    $panel.css("max-height", $panel.prop("scrollHeight") );
  });

});

jQuery将元素传递给加载结果功能

1 个答案: