javascript - 星级评定系统仅更新列表中的第一项

Question

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

SHOW PAGE 一切正常，但在 INDEX PAGE 中，出于某种原因，Javascript 仅更新 INDEX PAGE 中的第一本书>。当我点击其他图书评级时，它仍然只更新第一本书。

我觉得奇怪的另一件事是，当我没有使用 CSS 隐藏单选按钮并将它们替换为星标时，代码仅在索引页面中有效。

rails 新手请帮忙:)

JavaScript

rating_ballot.js

### Sets up the stars to match the data when the page is loaded. 
$(function () {
  $('form.rating_ballot').each(function() {
    var $form = $(this),
          checkedInput = $form.find('input:checked');

    checkedInput.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. (But only does it to the first Book)

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS

### The code doesn't work when i hide the radio buttons to display stars

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(显示)

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

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), :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(book.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(book.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(book.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(book.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(book.id) == 5, :class => 'rating_button') %>

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

创建.js.erb & 更新.js.erb

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

控制者

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

helper

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

###Before I open a Table

<table class="table id="book_574">_</table>
<table class="table id="book_575">_</table>
<table class="table id="book_576">_</table>

###After I open a the First Two Table

<table class="table id="book_574">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1090" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1090" method="post">

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

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input checked="checked" class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="574">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

<table class="table id="book_575">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1091" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1091" 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>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input checked="checked" class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="575">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

肯定是这个问题:

$(this).parents('form:first').submit();

如果您必须调用 :first，这意味着您正在调用多个元素，这可能就是为什么您只获得第一个提交的原因

---

您需要根据您单击的按钮选择单独的表单

我会试试这个:

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });