【问题标题】:How to show specific div element if there is a set limit in Ruby on Rails如果 Ruby on Rails 中有设置限制,如何显示特定的 div 元素
【发布时间】:2020-11-05 21:51:29
【问题描述】:

我有这个我想要实现的 rails 应用程序。

如果条件limit(4) 显示 4 个 div 元素,如何自动显示静态 div 元素?我想要实现的是在浏览器中显示 4 个邮箱时,这将只显示 Apply for our Program div 元素的静态元素。

<div class="row">
    <% @posts.limit(4).each do |post| %>
        <h2> <% post.title %> </h2>
    <% end %>
</div

<div class="row">
   <div class="border-box">
      <h1>Apply for our Program</h1>
      <a href="#">Link to Program</a>
   </div>
</div

如果显示 4 个帖子,我只想显示这个静态 div 元素。除非帖子不等于 4 时隐藏此静态 div 元素。

<div class="row">
   <div class="border-box">
      <h1>Apply for our Program</h1>
      <a href="#">Link to Program</a>
   </div>
</div

rails 应用程序中是否有一个特殊功能,如果它等于 4,则计算显示的 div,然后显示静态 div 元素。或者如果计数等于 4,我是否需要 Jquery 函数来显示静态元素?

【问题讨论】:

    标签: javascript jquery ruby-on-rails


    【解决方案1】:

    不需要任何JS。只需将第二个 div 放在里面

    <% if @posts.count >= 4 %>
    ...
    <% end %>
    

    【讨论】:

    • 绝对解决问题.. 谢谢你的这个。 (弓)
    • 另请注意,如果您之前在控制器中加载了@posts,调用@posts.limit(4) 仍将运行另一个SQL 查询。调用 @posts.first(4) 将为您提供(最多)前四条记录,而无需重新运行查询。
    【解决方案2】:

    如果您需要根据其他事件而不是帖子数量来制作动画或管理显示/隐藏,则可以使用 Javascript 实现此目的。

    我会用 jQuery 向你展示,但这可以用普通的 JS 轻松实现

    <div class="row">
     <% @posts.limit(4).each do |post| %>
        <h2> <% post.title %> </h2>
     <% end %>
    </div>
    
    <div class="row box--apply hidden">
      <div class="border-box">
        <h1>Apply for our Program</h1>
        <a href="#">Link to Program</a>
      </div>
    </div>
    

    在哪里

    .hidden { display:none; }
    .show { display: block; }
    

    然后在 JS 中

    $(function() {
      const nH2 = $('H2').length;
      const $box = $('.box--apply');
    
      if(nH2 >= 4) {
        $box.removeClass('hidden').addClass('show');
      }
    });
    

    并且,可以根据您的要求扩展逻辑。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-30
      • 1970-01-01
      • 1970-01-01
      • 2015-03-20
      • 2021-10-16
      • 1970-01-01
      相关资源
      最近更新 更多