单击星星后，JavaScript 星星不发光？

Question

我已经使用“Creating an Ajaxified Star Rating System in Rails 3”实现了星级评分系统。

修改代码后，索引页面中的一切正常，但由于某种原因，在我单击星星后，星星不再发光。我认为我的 JavaScript 有问题。有没有办法通过 CSS 做到这一点？

如果您需要我添加任何其他内容，请告诉我。

rating_ballot.js：

$(document).ready(function() {

  ### Makes stars stay glowing after click.
  ### But after its clicked, the value is saved, But the star doesn't stay glowing. 

  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });


  ### Submits the form & saves data. 
  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS：

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

index.hrml.erb（书籍）：

<% @books.each do |book| %>
  <table id="book_<%= book.id %>">
    <tbody>  
      <tr>  
        <td>
          <%= book.title %>
        </td> 
      </tr> 

      <tr>

        <td  id="rating">                   
          <%= render :partial => 'ratings/rating', :locals =>{:book => book} %>
        </td>

      </tr>
    <tbody>
  </table>
<% end %>

_rating.html.erb：

<%= form_for(rating_ballot(book.id), remote: true, :html => { :class => 'rating_ballot' }) do |f| %>

  <% sfx = "value_#{book.id}_1" %>
  <%= f.label(sfx, content_tag(:span, '1'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_2" %>
  <%= f.label(sfx, content_tag(:span, '2'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 2, current_user_rating(book.id) == 2, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_3" %>
  <%= f.label(sfx, content_tag(:span, '3'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 3, current_user_rating(book.id) == 3, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_4" %>
  <%= f.label(sfx, content_tag(:span, '4'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 4, current_user_rating(book.id) == 4, 
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <% sfx = "value_#{book.id}_5" %>
  <%= f.label(sfx, content_tag(:span, '5'), :class => "rating") %>
  <%= radio_button_tag("rating[value]", 5, current_user_rating(book.id) == 5,
      :class => 'rating_button', :id => "rating_#{sfx}") %>

  <%= hidden_field_tag("book_id", book.id) %>
  <%= f.submit :Submit, style: "display: none" %>

<% end %>

create.js.erb 和 update.js.erb：

$('#book_<%= @book.id%> #rating').html("<%= escape_javascript(render :partial => 'ratings/rating', :locals => {:book => @book}) %>");

助手：

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

开发者工具中的 HTML 代码

index.html.erb

打开表格前的代码

<table class="table" id="book_1176">...</table>
<table class="table" id="book_1177">...</table>
<table class="table" id="book_1178">...</table>
<table class="table" id="book_1179">...</table>

打开表格后的代码

<table class="table" id="book_1176">
  <tbody>  
    <tr>
      <td id="rating">                         
        <form accept-charset="UTF-8" action="/ratings/1093" class="rating_ballot" data-remote="true" id="edit_rating_1093" method="post">

        <div style="margin:0;padding:0;display:inline" class="bright">
        <input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM="></div>

        <label class="rating bright" for="rating_value_1176_1"><span>1</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_1" name="rating[value]" type="radio" value="1">

        <label class="rating bright" for="rating_value_1176_2"><span>2</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_2" name="rating[value]" type="radio" value="2">

        <label class="rating bright" for="rating_value_1176_3"><span>3</span></label>
        <input class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_3" name="rating[value]" type="radio" value="3">

        <label class="rating bright" for="rating_value_1176_4"><span>4</span></label>
        <input checked="checked" class="rating_button #{bright?(i, book.id)} bright" id="rating_value_1176_4" name="rating[value]" type="radio" value="4">

        <label class="rating" for="rating_value_1176_5"><span>5</span></label>
        <input class="rating_button #{bright?(i, book.id)}" id="rating_value_1176_5" name="rating[value]" type="radio" value="5">

        <input id="book_id" name="book_id" type="hidden" value="1176">
        <input name="commit" style="display: none" type="submit" value="Submit">

      </form>     

     </td>
    </tr> 
  </tbody>
</table>

Answer 1

抱歉，如果这不能直接解决问题：

---

CSS

当星星被“重视”时，你让星星亮起来的方法是在它们加载的类之上给它们某种类

您的 JS 会为您执行此操作：

  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });

如果您重新加载页面，我可以看到问题，没有方法将bright 类添加到您的值中

当您点击星标时，您正在提交页面（并因此重新加载页面），这使情况更加复杂。如果这是在 Ajax 中，这似乎不是问题（尽管它仍然存在）

---

修复

我会试试这个：

<%= form_for(rating_ballot(book.id), remote: true, :html => { :class => 'rating_ballot' }) do |f| %>

  <% [1..5].each do |i| %>

      <% sfx = "value_#{book.id}_#{i}" %>

      <%= f.label(sfx, content_tag(:span, i), :class => "rating") %>
      <%= radio_button_tag("rating[value]", i, current_user_rating(book.id) == i, 
      :class => 'rating_button #{bright?(i, book.id)}', :id => "rating_#{sfx}") %>
  <% end %>

  <%= hidden_field_tag("book_id", book.id) %>
  <%= f.submit :Submit, style: "display: none" %>

<% end %>

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

  def bright?(val, book_id)
    if(current_user_rating(book_id) < val)
        "bright"
    end
  end
end