Question

我的页面在本地工作之前它只是一个带有jQuery的静态html页面。但是，我在rails之上构建它因为我想在heroku上免费上网。

我所做的只是将jQuery移动到application.js文件中并更改了application.html.erb文件，因为这就是所有需要的，对吗？

我的gemfile中包含以下内容：

gem 'sqlite3'
gem 'jquery-rails'
gem 'thor'

这是我的Application.html.erb文件：

      <head>
          <title>Me</title>
            <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
  <%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
  <%= javascript_include_tag "jquery-rails.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.pack.js" %>
  <%= javascript_include_tag "jquery.fancybox-1.3.4.css" %>
  <%= javascript_include_tag "jquery.easing-1.3.pack.js" %>
  <%= javascript_include_tag "jquery.mousewheel-3.0.4.pack.js" %>
  <%= render 'layouts/stylesheets' %>
  <%= csrf_meta_tag %>
        </head>

这是我的application.js文件：

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

            $("a#example1").fancybox();

            $("a#example2").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $("a#example3").fancybox({
                'transitionIn'  : 'none',
                'transitionOut' : 'none'    
            });

            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

            $("a#example5").fancybox();

            $("a#example6").fancybox({
                'titlePosition'     : 'outside',
                'overlayColor'      : '#000',
                'overlayOpacity'    : 0.9
            });

            $("a#example7").fancybox({
                'titlePosition' : 'inside'
            });

            $("a#example8").fancybox({
                'titlePosition' : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

            $("#various4").fancybox({
                'padding'           : 0,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
        });

Answer 1

删除

<%= javascript_include_tag :defaults %>

因为它会添加原型（如果你仍然使用~2.x到3.0.x）。

此外，您似乎正在尝试使用fancybox，但没有为fancybox包含必要的JS文件。

首先将jquery.fancybox-x.x.x.pack.js复制到public/js/ 然后包含此标记

<%= javascript_include_tag "jquery.fancybox-x.x.x.pack.js" %>

Answer 2

您是否尝试将所有这些功能包装在

中

$(document).ready(function(){

  // your scripts here

});

您的脚本可能只在本地工作，因为页面加载速度足以让脚本找到您已经存在的内容。哦，如果您删除javascript_include_tag :default，则必须自己添加application.js。

让jQuery在rails app上工作

2 个答案: