Question

我写了一些jQuery来定位左侧导航栏中的列表项（li）。当我将更改推送到Heroku时，jQuery工作，但我写的jQuery在localhost上不起作用。我的目标是当用户将鼠标悬停在导航栏中的链接上时，链接将移至右侧2 em。我无法弄清楚为什么jQuery在托管网站上工作而不是localhost。我觉得它可能与application.js文件有关。任何帮助将不胜感激，并提前感谢!!!

// javascript assets
// = require jquery
// = require jquery_ujs
// = require turbolinks
// = require welcome.js
// = require_tree .

// the html
<div class="list-items">
      <ul>
        <li class="links"><%= link_to "Portfolio", portfolio_url %></li>
        <li class="links"><%= link_to "Tutorials", tutorials_url %></li>
        <li class="links"><%= link_to "Blog", blog_url %></li>
        <li class="links"><%= link_to "About Me", aboutme_url %></li>
      </ul>
</div>

// css for list items
.list-items {
    font-size: 1.5em;
    line-height: 2em;
    margin-left: -.20em;
}


// JS for hovering over the link
$(document).ready(function() {
  console.log("You are in the console right now!!");

  $(".links").on("mouseenter", function() {
    $(this).css("margin-left", "2em");
  });

  $(".links").on("mouseleave", function() {
    $(this).css("margin-left", "-0.05em");
  });
});

Answer 1

这里有一件事可以想到......

TurboLinks无法与

配合使用

$(document).ready(function() {

因为在您导航时，Turbolinks不会重新加载页面。在您的本地计算机上，您可能只是因为Turbolinks加载页面的方式而无法正常工作。在生产中，您可能已经进行了不同的导航，并且页面实际上已经触发了此事件。

有关详细信息，请参阅Rails 4: how to use $(document).ready() with turbo-links。

jQuery适用于Heroku，但不适用于Rails localhost

1 个答案: