Question

所以有例程和掌握的例程（以黄金显示）。

如果它是一个掌握的例行程序并且首先出现在订单中，那么我想减少其margin-top。

现在理论上很好。只是做一个条件<% if routine.order == 0 %>，但后来我的问题是，如果用户检查了第一个掌握的例程，那么掌握的例程就会消失，然后我在标题和下一个出现的主程序之间再次出现这个尴尬的差距。

我需要什么样的条件或css-trick / ruby-trick来弥补这个差距？

模式

  create_table "routines", force: true do |t|
    t.integer  "missed_days",      default: 0
    t.datetime "date_started"
    t.string   "trigger"
    t.string   "action"
    t.integer  "user_id"
    t.integer  "order"
    t.datetime "completed_at"
    t.integer  "days_challenged"
    t.datetime "created_at",                                                                          null: false
    t.datetime "updated_at",                                                                          null: false
  end

HTML

    <div class="page-header-routines">
      <a href="/routines">
        <h2><b>Routine</b></h2>
</a>    </div>
      <table>
  <tbody>
    <div class="routine-padding-home">
          <tr class="routine-space-mastered">
          <td colspan="3">
            <a class="update_routine" id="home_check_mastered" data-remote="true" rel="nofollow" data-method="put" href="/mark_completed/3-read"><span class="glyphicon glyphicon-ok"></span></a>
          </td>
          <td>
            <div class="strike-margin-right">
              <a data-modal="true" class="btn" id="gold" href="/routines/3/missed_dates/new">
                <span class="glyphicon glyphicon-remove"></span>
</a>            </div>
          </td>
          <td>
            <div class="gold-standard">
              <a href="/routines/3-read">
                  After I sit with tea,
                I will <span class="label label-warning">read</span>
.
</a>            </div>
          </td>
        </tr> 
    </div>
  </tbody>
</table>

<script>
$('.update_routine').bind('ajax:success', function() {
$(this).closest('table').fadeOut();
});
</script>

Answer 1

您必须在前端使用JavaScript执行此操作。

从您正在淡出的那一行中找到下一个表格行，并将CSS设置为与第一个相同。

如果在所有表行上添加一个类，则可能更容易找到下一个子项，以便您可以轻松找到该类型的下一个。

如何使用条件来减少对象的边距

1 个答案: