星级评分系统仅更新列表中的第一项

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

一切都在SHOW PAGE中工作 ，但是在INDEX PAGE中 ，由于某些原因，Javascript只更新了INDEX PAGE中的第一本书。 当我点击其他书评时，它仍然只更新第一本书。

我觉得奇怪的另一件事是，当我没有使用CSS隐藏单选按钮并用星号替换时，代码只能在索引页面中工作。

新的铁路请帮助:)

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'); }

VIEWS

show.html.erb（显示） 

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

index.hrml.erb（书籍） 

  <table id="book_">          'ratings/rating', :locals =>{:book => book} %>

_rating.html.erb 

  { :class => 'rating_ballot' }, remote: true ) do |f| %> "rating", :id=>"1"}) %>  'rating_button') %> "rating", :id=>"2"}) %>  'rating_button') %> "rating", :id=>"3"}) %>  'rating_button') %> "rating", :id=>"4"}) %>  'rating_button') %> "rating", :id=>"5"}) %>  'rating_button') %>

create.js.erb＆update.js.erb 

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

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 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 _
 _
 _
 ###After I open a the First Two Table 
  
  TITLE  
 
  
 
    
             
 		 
  
 
  
  TITLE

当然这是问题所在： 

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

如果你必须打电话:first ，这意味着你要调用多个元素，这可能就是为什么你只提交第一个元素

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

我会试试这个： 

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

这段代码有几个问题： 

 $('#issue<%= @issue.id%> #rating')

首先，您只能拥有一个具有任何给定ID的元素。 看起来您网页上的多个元素共享相同的#rating ID。 现在jQuery $(...)选择器可能只返回第一个#rating而不是全部#rating 。 尝试将#rating s命名为#rating-1等，类似于#issue元素。

格式为#issue_1 ， #issue_2等的问题的ID也不是？ $('#issue<%= @issue.id%> ...不会呈现下划线。

终于找到了解决办法:) 

 <% 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}") %>
Interesting Posts

谷歌Chrome嵌入了Windows上的盒子阴影错误，而不是Mac：更好的解决方法？

CSS选择器：选择TR，其中TD包含特殊值

将div和他的风格复制到新窗口

CSS转换：仅适用于图像

布局divs在css中，如HTML表格中的表格单元格

菜单 – 在整个菜单项下显示子菜单 – HTML / CSS

仅更改背景颜色的Alpha通道

CSS背景颜色和文本随jquery / javascript改变

如何将Fixed元素hover到某个点

寻找一个等效于jQuery解决方案的javascript解决方案