Question

<a class="buttonDone">行，我有一个id="<%= dom_id(item) %>"。 show.html.erb 基本上是if-else condition的片段，因为某个项目的日期大于今天的日期，或者等于今天的日期，或者小于今天的日期。

问题是，在我的 update.js.erb 中，我试图确保一旦达到某个条件，我就会尝试添加某个.css类（即.complete）到<a class="notDue">或overDue或dueToday行。

我知道我必须对jQuery使用.addClass(.complete)方法。因此，如果不修改所有<a class="notDue" or "overDue" or "dueToday">，我如何确保修改正确的类，而不是其他类？

show.html.erb

 <% if item.due_date > Date.today %>
    <% if item.done? %>
      <a class="complete">
        <%= item.due_date %>
      </a>
      <a class="linkResults">
        <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %><br/> <br/>
      </a>
    <% else %>
      <div class="oneLine">
        <a class="notDue">
          <%= item.due_date %>
        </a>
        <a class="linkResults">
          <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %>
        </a>
        <a class="buttonDone" id="<%= dom_id(item) %>">
          <%= form_for([@todolist, item], remote: true, method: :put) do |f| %>
              <%= f.hidden_field :done, value: '1' %>
              <%= f.submit 'Mark Item as Done' %>
          <% end %>
        </a>
        <br/><br/>
      </div>
    <% end %>
  <% elsif item.due_date == Date.today %>
    <% if item.done? %>
      <a class="complete">
        <%= item.due_date %>
      </a>
      <a class="linkResults">
        <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %><br/> <br/>
      </a>
    <% else %>
      <div class="oneLine">
        <a class="dueToday">
          <%= item.due_date %>
        </a>
        <a class="linkResults">
          <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %>
        </a>
        <a class="buttonDone" id="<%= dom_id(item) %>">
          <%= form_for([@todolist, item], remote: true, method: :put) do |f| %>
              <%= f.hidden_field :done, value: '1' %>
              <%= f.submit 'Mark Item as Done' %>
          <% end %>
        </a>
        <br/><br/>
      </div>
    <% end %>
  <% else %>
    <% if item.done? %>
      <a class="complete">
        <%= item.due_date %>
      </a>
      <a class="linkResults">
        <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %><br/> <br/>
      </a>
    <% else %>
      <div class="oneLine">
        <a class="overdue">
          <%= item.due_date %>
        </a>
        <a class="linkResults">
          <%= link_to "#{item.task_title}", [@todolist, item], style: "font-weight: bold;" %>
        </a>
        <a class="buttonDone" id="<%= dom_id(item) %>">
          <%= form_for([@todolist, item], remote: true, method: :put) do |f| %>
              <%= f.hidden_field :done, value: '1' %>
              <%= f.submit 'Mark Item as Done' %>
          <% end %>
        </a>
        <br/><br/>
      </div>
    <% end %>
  <% end %>

update.js.erb

$("#<%= dom_id(@todoitem) %>").hide();
alert("<%= dom_id(@todoitem) %>");

applications.css

.complete {
    border-radius: 10px;
    background: green;
    padding: 3px;
    width: 30px;
    height: 30px;

    color: white;
}

Answer 1

您可以使用辅助方法并移动该逻辑 if statement 它呢

def dateClass date
 if item.due_date > Date.today
   return 'notDue'
 elsif item.due_date == Date.today
   return 'dueToday'
 else
   return 'overdue'
end

并在模板中使用该辅助方法

 <a class='<%= dateClass(item.due_date) %>'>
   <%= item.due_date %>
 </a>

这可以使您的模板更短更清洁

从Rails dom_id方法获取HTML类名？

1 个答案: