Question

我正在使用Bootstrap轮播与{{1}}，这是它的样子：

Rails

但对于<div class="carousel-inner"> <% @post.gallery_images.each do |i| %> <div class="item"> <%= image_tag i.image.url, class: 'img-responsive' %> </div> <% end %> </div> div，我需要为轮播设置一个类item才能启动，然后选择要显示的图像。我相信我需要JS来实现这一目标，最终结果应该看起来像这样：

active

如何与<div class="carousel-inner"> <% @post.gallery_images.each do |i| %> <div class="item active"> <%= image_tag i.image.url, class: 'img-responsive' %> </div> <% end %> </div>循环合作动态更新active类？

Answer 1

正如Amadan暗示的那样，你必须通过DOM操作（即JavaScript）来改变活动项。如果您希望第一个项目成为初始项目：

<div class="carousel-inner">
    <% @post.gallery_images.each.with_index do |img, index| %>
    <% if index == 0 %>
    <div class="item active">
    <% else %>
    <div class="item">
    <% end %>
       <%= image_tag img.image.url, class: 'img-responsive' %>
    </div>
    <% end %>
</div>

当然，有比这更优雅的解决方案。但这只是给你一些快速的帮助。

Answer 2

虽然Rails看起来很受欢迎，但您可以使用JavaScript轻松完成此操作。

将以下代码（任一行）添加到模板的底部。

<script type="text/javascript">
/* add 'active' class to the first item */
$('.carousel-inner .item').first().addClass('active');

/* add 'active' class to the last item */
$('.carousel-inner .item').last().addClass('active');
</script>

如何检查Rails中的当前循环状态？

2 个答案: