javascript - 如何将被覆盖的属性保存为nil？

Question

仅当用户将其保存在按时间顺序排列的第一个注释下时，排名才会保存。

挑战/表演

<% @challenge.dates_challenged.first(@challenge.days_challenged + @challenge.missed_days).each_with_index do |date, i| %>
  <% if @notes.any? { |note| note.notes_date.strftime("%m/%d/%y") == date.strftime("%m/%d/%y") } %>
    <% @notes.each do |note| %>
      <% if note.notes_text.present? %>
        <% if note.notes_date.strftime("%m/%d/%y") == date.strftime("%m/%d/%y") %>
          <div class="notes-notes-background">
            <% if note.ranking == 1 %>
              <%= image_tag '1.png', class: 'note-emoticon' %>
            <% elsif note.ranking == 2 %>
              <%= image_tag '2.png', class: 'note-emoticon' %>
            <% elsif note.ranking == 3 %>
              <%= image_tag '3.png', class: 'note-emoticon' %>
            <% elsif note.ranking == 4 %>
              <%= image_tag '4.png', class: 'note-emoticon' %>
            <% end %>
            <div style="font-weight: bold; font-size: 14px; color: #a0b4f0;">DAY <%= i + 1 %></div>
            <b><%= note.notes_date.strftime("%b %d, %Y") %></b><br><br>
            <div style="margin-left: 20px; margin-right: 20px;">
              <%= link_to edit_note_path(note) do %>
                <%= simple_format note.notes_text %>
              <% end %>
            </div>
          </div>
        <% end %>
      <% else %>
      <% end %>
    <% end %>
  <% else %>
    <div class="notes-form-background" style="padding-top: 1em;">
      <div style="margin-bottom: -19px; color: #a0b4f0; font-weight: bold; font-size: 14px; color: #a0b4f0;">DAY <%= i + 1 %></div><br>
      <div style="color: #eee;"><%= date.strftime("%b %d, %Y") %></div>
      <div style="margin-left: 20px; margin-right: 20px;">
        <%= render 'notes/form', :date => date %>
      </div>
    </div>
  <% end %>
<% end %>

注释/表格

<%= form_for [@notable, @note] do |f| %>
  <%= f.hidden_field(:ranking, id: 'ranking') %>
  <%= image_tag('1.png', data: { ranking: 1 }, class: 'image-clicker') %>
  <%= image_tag('2.png', data: { ranking: 2 }, class: 'image-clicker') %>
  <%= image_tag('3.png', data: { ranking: 3 }, class: 'image-clicker') %>
  <%= image_tag('4.png', data: { ranking: 4 }, class: 'image-clicker') %>
<% end %>

<script>
  $('.image-clicker').click(function() {
    $('#ranking').val($(this).data('ranking'));
    $('.clicked').removeClass('clicked')
    $(this).addClass('clicked');
  });
</script>

注释中的其他所有内容都会被保存，例如文本，但不保存排名。

Answer 1

一页上只能有一个且只有一个同名的 html id。在您的情况下，所有隐藏字段都具有相同的 id #ranking。

您的 jQuery 选择器将选择第一个。这解释了您面临此问题的原因。

只需为您的隐藏字段指定一个类，然后在您的点击函数中，在子级中搜索排名隐藏字段。