如何将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 传递给函数呢？

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

scrollToElement('event_512');

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

TypeError: ele.offset is not a function


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

现在我不知道该怎么办了？

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

谢谢。

Answer 1

您在这里混合了 jQuery 和 non-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对象的字符串表示为[Object object].

当你只使用

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

传递参数，你传递一个DOM-element。本机 DOM-element 没有名为 offset() 的方法（这是一个 jQuery 方法！），因此您在那里收到错误。

Answer 2

在使用 jQuery 函数之前，您需要将元素传递给 jQuery。

您需要按照以下方式进行：

$(ele).offset().top();

现在您正在将 ele 传递给 jQuery，因此您可以使用 offset()。

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

How to pass an HTML element ID to the function written in JavaScript and what's the error 'ele.offset is not a function'?

html

javascript

jquery

dom

parameter-passing