所以,我正在尝试为 Rails 4 中的 Bootstrap 3 轮播找出一个解决方案。
我有这个:
<li> <a id="carousel-selector-0" class="selected">
<%= image_tag @gallery.images[0].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<li> <a id="carousel-selector-1">
<%= image_tag @gallery.images[1].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
...etc...
我正在寻找一种 each 类型的方法来解释图库中可变数量的图像。
第一张照片看起来像这样:
<li> <a id="carousel-selector-0" class="selected">
<%= image_tag @gallery.images[0].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
它之后的那些看起来像:
<li> <a id="carousel-selector-1">
<%= image_tag @gallery.images[1].photo.url(:thumb), class: 'img-responsive' %>
</a></li>
.......
当然,每张照片每个数字都会增加一个。
感谢您的帮助!
解决方案
谢谢你的创意原因!
这是有效的:
<% @gallery.images.each_with_index do |image, index| %>
<li> <a id="carousel-selector-<%=index%>" class="<%= 'selected' if index == 0%>">
<%= image_tag image.photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<% end%>
如果有人正在寻找 .carousel-inner div 的解决方案(几乎相同):
<div class="carousel-inner">
<% @gallery.images.each_with_index do |image, index| %>
<div class="item <%= 'active' if index == 0%>" data-slide-number="<%= index %>">
<%= image_tag image.photo.url(:large), class: 'img-responsive' %>
</div>
<% end%>
</div>
最佳答案
像这样的东西应该可以工作:
<% @gallery.images.each_with_index do |image, index| %>
<li> <a id="carousel-selector-<%=index%>" class="<%='selected' if index == 0%>">
<%= image_tag image.photo.url(:thumb), class: 'img-responsive' %>
</a></li>
<% end%>
修改:因为我没有注意到li
标签中selected的区别。现在我正在使用 each_with_index
关于ruby-on-rails - 通过更改 html( Bootstrap 轮播)来 Rails 每种方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30446181/