Question

我使用本教程实施了星级评分系统 http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3

一切都在 SHOW PAGE 中有效，但在 INDEX PAGE 中，JavaScript无效。加载页面时，索引页面中的每本书都与第一本书具有相同的评级，并且没有为页面上的每本书加载正确的星级。

（我在JavaScript代码的开头是否遗漏了某些内容，比如ID？）

新的铁路请帮助：）

JAVASCRIPT

rating_ballot.js

### Sets up the stars to match the data when the page is loaded. 
### But applies the first Books Rating to all

$(function () {
  var checkedId = $('form.rating_ballot > input:checked').attr('id');
  $('form.rating_ballot > label[for=' + checkedId + ']').prevAll().andSelf().addClass('bright');
});

$(document).ready(function() {

    ### Makes stars glow on hover.
  $('form.rating_ballot > label').hover(
    function() {    // mouseover
        $(this).prevAll().andSelf().addClass('glow');
    },function() {  // mouseout
        $(this).siblings().andSelf().removeClass('glow');
  });

  ### Makes stars stay glowing after click.
  $('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'); }

视图

show.html.erb（show）

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

index.hrml.erb（books）

<% @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(issue.id), :html => { :class => 'rating_ballot' }, remote: true ) do |f| %>

  <%= f.label("value_1", content_tag(:span, '1'), {:class=>"rating", :id=>"1"}) %>
  <%= radio_button_tag("rating[value]", 1, current_user_rating(issue.id) == 1, :class => 'rating_button') %>

  <%= f.label("value_2", content_tag(:span, '2'), {:class=>"rating", :id=>"2"}) %>
  <%= radio_button_tag("rating[value]", 2, current_user_rating(issue.id) == 2, :class => 'rating_button') %>

  <%= f.label("value_3", content_tag(:span, '3'), {:class=>"rating", :id=>"3"}) %>
  <%= radio_button_tag("rating[value]", 3, current_user_rating(issue.id) == 3, :class => 'rating_button') %>

  <%= f.label("value_4", content_tag(:span, '4'), {:class=>"rating", :id=>"4"}) %>
  <%= radio_button_tag("rating[value]", 4, current_user_rating(issue.id) == 4, :class => 'rating_button') %>

  <%= f.label("value_5", content_tag(:span, '5'), {:class=>"rating", :id=>"5"}) %>
  <%= radio_button_tag("rating[value]", 5, current_user_rating(issue.id) == 5, :class => 'rating_button') %>

  <%= hidden_field_tag("issue_id", issue.id) %>
  <%= f.submit :Submit, style: "display: none" %>
<% end %>

create.js.erb＆amp; update.js.erb

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

CONTROLLER

class RatingsController < ApplicationController
  before_filter :current_user, only: [:create, :update]

  respond_to :html, :js

  def create
    @book = Book.find_by_id(params[:book_id])
    @rating = Rating.create(params[:rating])    
    @rating.book_id = @book.id
    @rating.user_id = current_user.id
    if @rating.save
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

  def update
    @book = Book.find_by_id(params[:book_id])
    @rating = current_user.ratings.find_by_book_id(@book_id)
    if @rating.update_attributes(params[:rating])
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

end

助手

module IssuesHelper

  def rating_ballot(issue_id)
    if @rating = current_user.ratings.find_by_issue_id(issue_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(issue_id)
    if @rating = current_user.ratings.find_by_issue_id(issue_id)
       @rating.value
    end
  end

end

Answer 1

问题似乎在这里：

$(function () {
  var checkedId = $('form.rating_ballot > input:checked').attr('id');
  $('form.rating_ballot > label[for=' + checkedId + ']').prevAll().andSelf().addClass('bright');
});

它获得第一个检查输入的id，并且对于所有表单，将星级设置为该值。

试试这段代码：

$(function () {
    $('form.rating_ballot').each(function() {
        var $form = $(this),
              checkedInput = $form.find('input:checked');

        checkedInput.prevAll().andSelf().addClass('bright');
    });
});

星级评分Javascript在Index Page中无法正常工作

1 个答案: