单击时将 2 Bootstrap 列替换为 2 个隐藏列。 Rails 4, Bootstrap

Question

我正在使用 Twitter Bootstrap 3.

我在页面底部有代表 4 个相似广告的栏目系统。

在视图中：

    <div class="row similar">
                    <% @recomended_ads.each do |advertisement| %>
                        <div class="col-md-3 block-3 clearfix">
                            <div class="block-3-image pull-left">
                               <%= link_to (image_tag advertisement.pictures.first.image,:title=> advertisement.name, :width=>210),advertisement %>        
                            </div><!-- End block-3-image -->

                        BASIC CONTENT!


                    </div><!-- End block-3 -->

                   <%end%>


           <div class="col-md-3 block-3 clearfix" style="height:220px !important;" id="vips">
                  NEW CONTENT
          </div
          <div class="col-md-3 block-3 clearfix" style="height:220px !important;" id="vips2">
                 NEW CONTENT 2
       </div>
    </div>

在控制器中：

@recomended_ads = Advertisement.where(:country_id=>@location.id).where("recomend >= ?", Time.now).where.not(id: @advertisement.id).limit(4).order("RAND()")

基本上它最多生成 4 列。

我需要的：

我需要在用户点击特定内容时更改最后 2 列内容 link。到目前为止我已经创建了：

<div class="col-md-3 block-3 clearfix" style="height:220px !important;" id="vips">
   NEW CONTENT
</div
<div class="col-md-3 block-3 clearfix" style="height:220px !important;" id="vips2">
   NEW CONTENT 2
</div>

这两列是隐藏的，并且与我想要的列在同一行内hide/replace。

我想出了脚本，show/hide那些隐藏的列

 $(document).ready(function() {
$('.question4').click(function(e){
         $('#vips').slideToggle("fast");
          $('#vips2').slideToggle("fast");

     e.preventDefault();

})
});//end of read

如果控制器操作中只有两个默认列 .limit(2)，则工作完美。如果超过 2 个，这些列将被向下推到下一行。而这正是我不想要的。

问题：

1) 如果点击 link 是否可以将限制值从 4 更改为 2？没有页面重新加载？我相信 Jquery 不能在服务器端改变任何东西。

2) 或者还有其他技巧可以达到这样的效果？

此时我的代码就是这样做的。

项目符号显示它应该是什么样子。

有什么建议会很好吗？提前致谢。

Answer 1

我想出了解决办法。

它很乱，但可以满足我的需要。

1) 在视图中，我将这一行 <% @recomended_ads.each do |advertisement| %> 更改为： <% @recomended_ads.to_enum.with_index(1) do |advertisement, index| %> 因此我可以为每一列设置索引。

2) 然后将 <div class="col-md-3 block-3 clearfix"> 更改为 <div class="col-md-3 block-3 clearfix" id=<%= "recomended_#{index}" %> > 这样我就可以为每一列创建不同的 div id。

3) 然后脚本现在看起来像这样。

 $(document).ready(function() {
    $('.question4').click(function(e){
       $('#recomended_3').slideToggle("fast");
                $('#recomended_4').slideToggle("fast");
                $('#recomended_5').slideToggle("fast");
             $('#vips').slideToggle("fast");
              $('#vips2').slideToggle("fast");     
         e.preventDefault();
    })
});//end of ready

这很有魅力。就是过渡效果太丑了，我换个办法吧

希望有人能帮到你。

单击时将 2 Bootstrap 列替换为 2 个隐藏列。 Rails 4, Bootstrap

Replace 2 Bootstrap columns with 2 hidden columns on click. Rails 4, Bootstrap

javascript

jquery

css

ruby-on-rails

twitter-bootstrap