我使用本教程实现了一个星级评级系统 http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3
在显示页面和索引页面中一切正常，直到我隐藏单选按钮并使用相应的标签输入值。由于某种原因，Javascript 仅更新索引页中的第一本书。当我单击其他图书评级时，它仍然只更新第一本书。
只有当我使用标签提交值时才会发生这种情况，否则如果我不隐藏单选按钮，只要单击单选按钮就可以正常工作。
据我了解，我的标签可能都使用相同的 ID，因为单击实际的单选按钮效果很好。如何在循环运行时使用标签选择单选按钮？
刚接触 Rails，请帮忙:)
JAVASCRIPT
评级_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(显示)
<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}) %>");
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>
最佳答案
您有重复的id s 在您的单选按钮上，因此第二组 <label> s 将激活第一组单选按钮；您还有重复的id就在您的<td id="rating">上元素，因此您的 HTML 双重无效。你可以看到<label>此处的操作问题:
http://jsfiddle.net/ambiguous/fXRK7/
单击黑框(这些是星星的占位符)并观察单选按钮，您应该看到第二行框激活了第一行单选按钮。
您需要一些东西来制作您的单选按钮 id是独一无二的。如果您只想包含 _rating.html.erb每本书每页部分一次，那么您可以使用 book.id您必须使其独一无二 id s 代表您的单选按钮:
<% 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>所以我也把它们扔掉了。这应该让一切都正确连接起来。
关于javascript - 当我隐藏单选按钮时，星级评分系统无法正确更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20894090/