从 Rails dom_id 方法获取 HTML 类名？答案

【问题标题】：Obtain HTML class name from Rails dom_id method?从 Rails dom_id 方法获取 HTML 类名？
【发布时间】：2016-04-26 14:59:15
【问题描述】：

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

问题是，在我的 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;
}

【问题讨论】：

我必须说我不完全理解您的问题（您可以尝试重新表述）吗？而且，作为旁注，我看到你的模板中有很多重复，我认为你应该熟悉view partials。
@todoitem 和item 变量中有什么也可以解释这两者之间的关系

标签： javascript html css ruby-on-rails ruby

【解决方案1】：

您可以使用辅助方法并移动该逻辑 if 语句 给它

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>

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

【讨论】：