我使用本教程实施了星级评分系统 http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3
一切都在 SHOW PAGE 和 INDEX PAGE 中工作，直到我隐藏了Radio Buttons并使用相应的标签输入值。出于某种原因，Javascript仅更新 INDEX PAGE 中的第一本书。当我点击其他书评时，它仍然只更新第一本书。
这只发生在我使用标签提交值时，否则如果我不隐藏单选按钮，只要我点击单选按钮就可以正常工作。
根据我的理解，我的标签可能都使用相同的ID，因为单击实际的单选按钮工作正常。如何在循环中使用标签选择单选按钮？
新的铁路请帮助：）
JAVASCRIPT
rating_ballot.js
$(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 with the first Book when i click on the label
$(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/labels
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(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 %>
create.js.erb＆amp; update.js.erb
$('#book_<%= @book.id%> #rating').html("<%= escape_javascript(render :partial => '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
<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 Tables
<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>
答案 0 :(得分：1)
您的单选按钮上有id个重复，因此第二组<label>将激活第一组单选按钮;您的id元素上也有重复的<td id="rating">，因此您的HTML无效。您可以在此处查看<label>问题：
http://jsfiddle.net/ambiguous/fXRK7/
点击黑匣子（这些是你的星星的占位符）并观看单选按钮，你应该看到第二排方框激活了第一行单选按钮。
您需要一些东西才能使您的单选按钮id独一无二。如果您每页每页仅包含_rating.html.erb部分内容，那么您可以使用已有的book.id为您的单选按钮创建唯一的id：< / p>
<% sfx = "value_#{blog.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}") %>
...
id上很少需要<label> s，所以我也放弃了{{1}}。这应该可以正确连接所有内容。