将2根引导列替换为2根隐藏列。Rails 4，引导

Question

我正在使用推特引导带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列的内容。到目前为止，我已经创建了：

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

这两列是隐藏的，与我想要隐藏/替换的列在同一行中。

我想出了一个脚本，那个节目/隐藏那些隐藏的专栏

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

     e.preventDefault();

})
});//end of read

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

问题：

1)如果单击链接，是否有可能将该限制值从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。

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

这就像魅力一样。只是过渡效果很难看，我会去找其他的解决方案。

希望有人能帮上忙。