Question

我的视图中有一段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循环的上下文中可用。

Answer 1

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

Answer 2

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

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

另外，为了能够将您的JS移动到更加理智的位置，您可以在模板中添加length和galleryID作为数据属性，并在您的javascript中引用它。例如，div将具有data-length= "#{c.photos.length}"和data-gallery-id= "#{c.id}"

Answer 3

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

这似乎可以解决问题。

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

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

<% @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 %>

ERB模板中的jQuery没有执行

3 个答案: