如何使用 rails 和 javascript 找到并返回我的 div 元素？答案

【问题标题】：How can I find and return my div element with rails and javascript?如何使用 rails 和 javascript 找到并返回我的 div 元素？
【发布时间】：2018-12-13 18:48:59
【问题描述】：

我正在尝试构建一段 javascript，它从网页中获取 url，查看地址中是否包含锚点，然后它将页面向下滚动到锚点，我必须这样做，因为引导程序置顶导航挡住了我试图查看的元素的视图。

我的js看起来像

findLink = function(){
  link = document.location.href
  parseLink(link)
}

parseLink = function(link) {
  if (link.split('').includes('#')) {
    post_id = link.split('#')[1];
    moveLink(post_id)
  }
}

moveLink = function(post_id){
  element = $('#+post_id').get()

}

$(document).on('turbolinks:load', findLink()) ||
$(document).on('page:load', findLink())

我的问题是，即使我试图找到

console.log($('#my_id')) # returns jQuery.fn.init {}
console.log($('#my_id').get()) # returns an empty []

我得到两个空数组。我不确定为什么会发生这种情况或如何解决它。

【问题讨论】：

尝试返回return $('#' + post_id).get()
您不应该使用 jquery 的 ready 回调将侦听器添加到 turbolinks:load 事件，因为该事件可能在 jquery 加载之前触发。使用document.addEventListener('turbolinks:load', findLink) 并且您实际上并不需要jquery 来获取元素，而是使用document.getElementById(post_id)，它会更快并且您无需等待jquery 加载滚动到帖子。
您在页面加载时立即调用findLink，而不是传递对事件监听器的引用
另外，您可以使用window.location.hash 获取该部分网址。

标签： javascript jquery ruby-on-rails turbolinks

【解决方案1】：

我最终写了一些 JS，它并不完美，但它完成了工作。

document.addEventListener('turbolinks:load', function(){
  link = document.location.href
  parseLink(link)
});

parseLink = function(link) {
  if (link.split('').includes('#')) {
    post_id = link.split('#')[1];
    moveLink(post_id)
  }
}

moveLink = function(post_id){
  element = document.getElementById(post_id)
  $('html,body').animate({
    scrollTop: $(element).position().top -= 200
   });
}

【讨论】：