如何在Rails-5应用程序中实现额外的JS？

Question

我正在尝试在我的应用程序中包含两个选项卡。我已经编写了所有的JS，但是它在我的HTML文件中。我想将其单独添加为.js文件，我将只在该页面中使用该文件，但无法找到方法。

在页面中，我得到了用户的动画和漫画列表。在一个选项卡中显示动画，在另一个选项卡中显示mangas。

我已经试过了

• with application.js:我只能使用application.js中的console.log()。除此之外，用户的页面不是loading.
• created action_name.js:据我所知，我应该告诉HTML它应该使用ujs，但是我不知道在哪里放置remote:true。(到目前为止，我只在表单中使用它)
• 尝试用<%= javascript_include_tag "js_file_name.js" %> (在<%= javascript_include_tag "js_file_name.js" %>下创建新的js_file_name.js文件)从外部实现

但他们没起作用。有什么事我错过了吗？

祝您今天愉快!

编辑：

联署材料：

document.getElementById('tab_anime').addEventListener("click", animeFunction);
document.getElementById('tab_manga').addEventListener("click", mangaFunction);

function mangaFunction() {
  console.log('manga');
  
  var mangas = document.getElementById('manga');
  mangas.classList.add("active");
  mangas.classList.add("show");
  mangas.classList.remove("fade");
  
  var anime = document.getElementById('anime');
  anime.classList.remove('show');
  anime.classList.remove('active');
  anime.classList.add('fade');
  
  var children = anime.firstElementChild.children;
  var i;
  for (i = 0; i < children.length; i++) {
    children[i].style.display = "none";
  }
  
  document.getElementById('tab_anime').parentElement.classList.remove('show');
  document.getElementById('tab_anime').parentElement.classList.remove('active');
  document.getElementById('tab_anime').getAttribute("aria-selected") ==  false;
  document.getElementById('tab_manga').parentElement.classList.add('show');
  document.getElementById('tab_manga').parentElement.classList.add('active');
  document.getElementById('tab_manga').getAttribute("aria-selected") ==  true;
} 


function animeFunction() {
  console.log('anime');
  
  var anime = document.getElementById('anime');
  anime.classList.add("active");
  anime.classList.add("show");
  anime.classList.remove("fade");
  
  var children = anime.firstElementChild.children;
  var i;
  for (i = 0; i < children.length; i++) {
    children[i].style.display = "block";
  }
  
  var mangas = document.getElementById('manga');
  mangas.classList.remove('show');
  mangas.classList.remove('active');
  mangas.classList.add('fade');
  
  document.getElementById('tab_manga').parentElement.classList.remove('show');
  document.getElementById('tab_manga').parentElement.classList.remove('active');
  document.getElementById('tab_manga').getAttribute("aria-selected") ==  false;
  document.getElementById('tab_anime').parentElement.classList.add('show');
  document.getElementById('tab_anime').parentElement.classList.add('active');
  document.getElementById('tab_anime').getAttribute("aria-selected") ==  true;
} 

HTML：

<div class="d-flex flex-column">
  <div class="mt-5 mb-3 border-0 p-0">
    <div class="row">
      <div class="col-md-3">
        <img src="https://cdnb.artstation.com/p/assets/images/images/013/162/715/large/muzu-violet-evergarden-by-muzuart.jpg?1564079658" class="card-img" alt="...">
      </div>
      <div class="col-md-9 d-flex">
        <div class="card-body d-flex flex-column pt-0 pb-0 pr-0">
          <div class="d-flex justify-content-between align-items-center">
            <h3 class="d-flex card-title m-0">User name here</h3>
            <div class="d-flex flex-row-reverse">
              <%= link_to 'Edit', edit_path, class: 'btn btn-outline-secondary mr-3 text-right' %>
              <button type="submit" class="btn btn-outline-danger mr-3">Delete</button>
            </div>
          </div>
          <p class="mt-auto">User_name here has watched 9 anime.s and has read 3 manga.s until now. </p>
          <p class="card-text">User-name has made a comment on @manga-anime.</p>
          <p class="card-text">
            <small class="text-muted">Last updated 3 mins ago</small>
          </p>
        </div>
      </div>
    </div>
  </div>

  <ul class="nav nav-tabs mt-5" id="MangAnimeTab" role="tablist">
    <li class="nav-item show active" role="presentation">
      <a class="nav-link" id="tab_anime" data-toggle="tab" href="#anime" role="tab" aria-controls="anime" aria-selected="true" >Anime</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="tab_manga" data-toggle="tab" href="#manga" role="tab" aria-controls="manga" aria-selected="false">Manga</a>
    </li>
  </ul>

  <div class="tab-content p-3" >
    <div id="anime" class="tab-pane d-flex flex-column justify-content-between show active" role="tabpanel">
      <div class="d-flex flex-row">
        <div class="col-md-1 p-0 mr-3">
          <img src="https://cdnb.artstation.com/p/assets/images/images/013/162/715/large/muzu-violet-evergarden-by-muzuart.jpg?1564079658" class="card-img" alt="...">
        </div>
        <div class="flex-fill pl-3 border-right border-left">
          <p>Anime name here</p>
          <p>When user has added this anime to his/her list</p>
        </div>
        <div class="flex-fill pl-3">
          <p>This anime has been took 9.8 points on avarage.</p>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="manga" role="tabpanel">
      <p>manga</p>
    </div>
  </div>
</div>

我想做的是:每当显示用户页面时，我都希望能够在漫画和动画选项卡之间切换。我可以用这个JS来实现它，但是我必须在html.erb文件中在<script></script>标记之间实现它。

我尝试在app/assets/javascript下创建//= require_tree .，并在app/assets/javascript下将//= require_tree .添加到application.js中。但是当我打开页面时，JS不起作用了。

Answer 1

和application.js:我只能使用application.js中的console.log()。使用其他任何内容，用户的页面都不会加载。

我听不懂你到底在说什么，但在你的名单上还有其他选择，请考虑以下几个答案：

如果要使用

1. ：remote: true，则应将其作为form_for助手

的参数

<%= form_for @form, remote: true do %>...

1. 如果您想在资产中添加js文件:检查您的application.js是否有//= require_tree .，它确保app/assets/javascripts/文件夹下的所有文件。如果不需要app/assets/javascripts下的所有文件，那么使用//=required js_file_name加载文件

更新

若要确认是否正在视图上加载文件，请执行以下操作：

Please add an alert('test') at the top of the page which will popup when you refresh the page and it will confirm that file is implemented but your selectors are not working

如果您能够看到上面的警报，那么我们需要按以下方式处理js代码

正如您所说的，如果您将js放入脚本标记中，就可以看到它的工作状态。我多次遇到这个问题--问题可能是，您试图在前2行中选择的元素还没有加载到DOM中，您的js已经执行。请确保在dom加载之后运行完整的js。

我通常在上编写js脚本。这确保所有延迟加载都完成了，dom也准备好了。如果您可以使用jquery，那么它的$(document).ready(function(){ YOUR CODE HERE }); jquery (Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it)可以帮助您找到一个替代文档就绪事件回调的方法。