Javascript 未在 rails 视图部分执行

Question

我使用了 bootstrap 导航栏，但我需要在不同的导航项点击时更改活动 class，但活动 class 不是 applied/added 时单击其他导航项，它保持静态。

局部视图的一些摘录是->

  <nav class="navbar navbar-expand navbar-light  fixed-top" id="topheader">
    <section class="container d-flex">
      <span class="navbar-brand mb-0 h1 a">Project Manager</span>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active" id="project-nav" onclick= "change2()">
          <%= link_to "Project", projects_path, class: "nav-link" %>
        </li>
        <li class="nav-item" id="user-nav" onclick= "change()">
          <%= link_to "user", users_path, class: "nav-link" %>
        </li>

      </ul>

所以我尝试在application.js里面写实现js，但是不行

$(".navbar-nav .nav-item").on("click", function(){
   $(".navbar-nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

我也试过了

function change(){
  document.getElementById("project-nav").className.replace(" active", "");
  document.getElementById("user-nav").className += " active ";
}

但是class没有改变-似乎onclick事件根本没有被执行

Answer 1

导致此问题的原因是：

<%= link_to "Project", projects_path, class: "nav-link" %>

还有这个：

<%= link_to "user", users_path, class: "nav-link" %>

因此，当您单击 nav-item 时，它实际上会重定向到 projects_path 或 users_path，这取决于您单击的 link。

此代码：

$(".navbar-nav .nav-item").on("click", function(){
  $(".nav-item").not(this).removeClass('active');
  $(this).addClass("active");
});

如果您具有以下代码结构，将会工作：

<ul class="navbar-nav mr-auto">
  <li class="nav-item"> Project </li>
  <li class="nav-item" > User </li>
</ul>

因此，如果您只想将 class active 添加到导航栏中的活动 link，您可以这样做：

HTML 文件:

<nav class="navbar navbar-expand navbar-light  fixed-top" id="topheader">
  <section class="container d-flex">
    <span class="navbar-brand mb-0 h1 a">Project Manager</span>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <%= link_to "Project", projects_path, class: "nav-link" %>
      </li>
      <li class="nav-item" >
        <%= link_to "user", users_path, class: "nav-link" %>
      </li>
          .....
     </ul>
  </section>
</nav>

在 JS 文件中：

$(document).on("turbolinks:load", function () {
  $('.nav-item a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

参考文献：

How to get Twitter-Bootstrap navigation to show active link?

https://guides.rubyonrails.org/working_with_javascript_in_rails.html

Javascript 未在 rails 视图部分执行

Javascript not executing in rails view partial

javascript

ruby-on-rails

nav

ruby-on-rails-5