javascript - 如何将 HTML 元素 ID 传递给用 JavaScript 编写的函数？错误 'ele.offset is not a function' 是什么？

Question

我用 JavaScript 编写了一个函数，如下所示:

<script type="application/javascript">
function scrollToElement(ele) { //alert(ele);
  $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}
</script>

以下是对该函数的调用:

<script type="application/javascript">
$(document).ready(function() {
  var query_event_id = getParameterByName('event_id');
  var ele = document.getElementById('event_'+query_event_id);

  //scrollToElement($('#event_'+query_event_id));
  scrollToElement(ele);    
});
</script>

我面临以下问题:

当我尝试代码 scrollToElement($('#event_'+query_event_id)); 时和alert(ele); (内部函数scrollToElemen())我得到[Object object]处于警戒状态。

当我尝试代码 var ele = document.getElementById('event_'+query_event_id); scrollToElement(ele); 时和alert(ele); (内部函数scrollToElemen())我得到null处于警戒状态。

为什么会这样呢？那么我应该如何将 HTML 元素的 id 传递给函数呢？

然后我尝试传递 <div> 的 id 的硬编码值HTML 代码如下:

scrollToElement('event_512');

然后警报向我显示了正确的元素:event_512但在控制台中我收到以下错误。

TypeError: ele.offset is not a function


$(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);

现在我不知道该怎么办？

有人可以帮我解决我的问题吗？

谢谢。

Answer 1

您在这里混合了 jQuery 和非 jQuery 函数，这并不是一个好主意。坚持其中一个 - 例如使用 jQuery:

function scrollToElement( ele ) {
  $(window).scrollTop( ele.offset().top ).scrollLeft( ele.offset().left );
}

$(document).ready(function() {
  var query_event_id = getParameterByName('event_id');
  scrollToElement($('#event_'+query_event_id)); 
});

带有[Object object]的alert是因为JS将alert()的参数转换为字符串，而jQuery对象的字符串表示是[对象对象].

当你只是使用

var ele = document.getElementById('event_'+query_event_id);

要传递参数，您需要传递一个 DOM 元素。 native DOM 元素没有名为 offset() 的方法(这是一个 jQuery 方法!)，因此您会收到错误。