ERB模板中的jQuery未执行答案

【问题标题】：jQuery within ERB template not executingERB模板中的jQuery未执行
【发布时间】：2015-05-06 18:46:45
【问题描述】：

我的视图中有一段 ERB 代码，用于获取图像对象数组并创建缩略图网格。我想使用jQuery 的fadeIn 和fadeOut 功能来循环打开和关闭缩略图。我已经查看了如何设置它的其他示例，但我的代码仍然无法正常工作。

数组中的图像数量是动态的，所以我必须动态设置我的标签 ID。这部分代码似乎正在工作。所有图像都设置为

然后我有一个 jQuery 脚本，它应该通过淡入淡出来循环显示图像。据我所知，脚本看起来不错。然而由于某种原因，它在页面呈现时没有执行。我的变量和函数都没有在控制台中定义。也没有错误。

<div class="media-container top gallery-container" style="margin:-12px;height:200px;">
    <% c.photos.each_with_index do |m,i| %>
    <a href="<%= m.image.url %>">
        <div class="gallery-photo" id="photo_<%= "#{c.id}_#{i}" %>" style="z-index:<%= 10+i %>;position:absolute;width:100%;height:100%;background-image: url('<%= m.image.url(:medium) %>');">
        </div>
    </a>
    <% end %>
    <br style="clear:both" />

    <% length = c.photos.length %>
    <% galleryID = c.id %>
    <%= javascript_tag do %>
        $(document).ready(function(){
            var length = '<%= length.to_json.html_safe %>';
            var galleryID = '<%= galleryID.to_json.html_safe %>';

            var runSlide = function(g, p) {
                $('#photo_' + g + '_' + p)
                    .fadeOut(1500)
                    .delay(3500)
                    .fadeIn(1500);
                };
            for (var i = 0; i < length; i++) {
                runSlide(galleryID, i);
            }
        });
    <% end %>
</div>

我的问题是我无法弄清楚为什么脚本没有运行。理想情况下，脚本不会放置在它所在的位置，但它取决于 length 和 galleryID 的值，它们仅在 Ruby 循环的上下文中可用。

【问题讨论】：

与答案没有直接关系，但如果您希望脚本存在于 assets/javascripts 中，您可以在模板中添加长度和 galleryID 作为数据属性，并在您的 javascript 中引用它们。例如 div 将有 data-length= "#{c.photos.length}" 和 data-gallery-id= "#{c.id}"
我也尝试过这种方法，但页面加载完成后脚本仍未执行。

标签： jquery ruby-on-rails erb

【解决方案1】：

那个while (true) 循环永远不会停止运行，所以它很可能卡在那里。我认为您可以摆脱外部 while 循环并保留 for 循环。

【讨论】：

这不是问题的原因。问题是我的<%= javascript_tag do %> 里面没有任何东西被执行。即使我去掉所有其他代码，只定义一个虚拟变量var test = 123;，然后加载页面，test 也没有在控制台中定义。

【解决方案2】：

你有一个额外的;在那里导致你的脚本失败。你的 JS 的第 7 行

                $('#photo_' + id + '_' + i)
                .fadeOut(1500); <<<<----------- HERE
                .delay(3500)
                .fadeIn(1500)

另外，为了能够将您的 JS 移动到一个更健全的地方，您可以在模板中添加长度和 galleryID 作为数据属性，并在您的 javascript 中引用它们。例如 div 将有 data-length= "#{c.photos.length}" 和 data-gallery-id= "#{c.id}"

【讨论】：

好吧，我修复了语法错误，但同样，这并没有找到问题的根源。问题是 javascript_tag 块内没有任何内容被执行。即使我删除所有内容并只输入var test = 123;，当我重新加载页面时，test 将在控制台中未定义。
如果你输入$(document).ready(function(){ alert('test'); });它不起作用？
正如我所说，“问题是 javascript_tag 块内没有任何内容被执行。”
@ACIDSTEALTH 你的 JS 控制台什么也没有？完全没有错误？通常当什么都没有被执行时，它会指向某个地方的 JS 错误。
没有控制台错误。没有服务器日志错误。检查器的“网络”选项卡中没有丢失（无法加载）资源。没有。任何地方都没有堆栈跟踪、错误或线索。就好像浏览器根本无法识别它是一个脚本一样。

【解决方案3】：

我知道为什么脚本没有运行，或者至少知道如何解决这个问题。我首先从循环中保存了我的 Ruby 变量，然后将我的脚本移动到部分的底部。由于我保存了 Ruby 变量，因此现在可以在定义这些变量后将脚本放置在部分中的任何位置。

这似乎成功了。

我仍然不确定为什么将脚本放在代码的较高位置时不会执行。

在我的循环中，我添加了以下代码：

<% @gallerySize = c.photos.length.to_i %>
<% @galleryID = c.id.to_i %>

然后我的脚本可以访问部分底部的数据：

<%= javascript_tag do %>
    $('#media-gallery').ready(function(){
        var gallerySize = parseInt('<%= @gallerySize %>');
        var galleryID = parseInt('<%= @galleryID %>');
        var i = 0;

        var runSlide = function(g, p) {
            $('#photo_' + g + '_' + p).fadeOut(1500).delay(3500).fadeIn(1500);
        };
        setInterval(function() {
            runSlide(galleryID, i);

            if (i === gallerySize) {
              i = 0;
            } else {
              i++;
            }
        }, 7500);
    });
<% end %>

【讨论】：