反正在Rails视图中调用JavaScript函数吗?

问题描述 投票:3回答:2

我想知道是否有一种方法可以调用javascript函数:

function get_url(link) {
  var url = window.location.href;
  var params = url.split('/')[3]
  return params == link ? 'active-menu' : ''
}

get_url('#about');

内部导轨视图链接如下:

<li class="nav-item">
     <%= link_to "About", root_path(:anchor => 'about'), class: "nav-link #{javascript(get_url('#about'))}", :"data-id" => "about" %>
</li>

注意此部分:

class: "nav-link #{javascript(get_url('#about'))}"

有没有办法做到这一点?如果没有,是否有更好的方法呢?

javascript ruby-on-rails
2个回答
0
投票

您可以将该函数调用推迟到客户端脚本:

  1. 向这些菜单元素添加一个类,以便您可以轻松获取所有这些元素,例如js-nav-link
  2. 在加载了dom内容的js中,计算并添加必要的类:
document.addEventListener('DOMContentLoaded', function(){
  Array.prototype.forEach.call(
    document.querySelectorAll(".js-nav-link"),
    function(e){
      if(yourModifiedGetUrlFunction(e.dataset.id))
        e.classList.add('active-menu');
    }
  )
});

0
投票

尝试在此服务器端进行操作很愚蠢,因为URL的哈希段不是由浏览器发送的。但是,如果我正确地理解了您,并且只想向与哈希匹配的链接添加一个类,则可以使用以下方法进行操作:

document.addEventListener("DOMContentLoaded", function(){
  if (window.location.hash) {
    document.querySelectorAll('a.nav-link[href="#%"]'.replace('%', window.location.hash))
            .forEach(function(link){
               link.classList.add('active');
            });
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.