星级评分系统仅更新列表上的第一项 [英] Star Rating System is Only Updating First Item on the List
本文介绍了星级评分系统仅更新列表上的第一项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已使用本教学课程实施星级评分系统 http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3
一切都可以在 SHOW PAGE 中使用，但在 INDEX PAGE 只更新 INDEX PAGE 中的第一本书籍。当我点击其他图书评级，它仍然只是更新第一本书。
我发现奇怪的另一件事是，代码只在索引页中工作，当我不使用CSS隐藏单选按钮，并替换为星星。 / p>
新增到rails请帮助：）
JAVASCRIPT
$ b
rating_ballot.js
###设置星标以匹配数据加载。
$（function（）{
$（'form.rating_ballot'）。each（function（）{
var $ form = $（this），
checkedInput = $ form .find（'input：checked'）;
checkedInput.prevAll（）andSelf（）。addClass（'bright'）;
}）;
}）;
$（document）.ready（function（）{
###使星星在悬停时发光
$（'form.rating_ballot& ）.hover（
function（）{// mouseover
$（this）.prevAll（）。andSelf（）。addClass（'glow'）;
}，function / mouseout
$（this）.siblings（）。andSelf（）。removeClass（'glow'）;
}）;
### 。
$（'form.rating_ballot> label'）。click（function（）{
$（this）.siblings（）。removeClass（bright）;
$ ）.prevAll（）。andSelf（）。addClass（bright）;
}）;
###提交表单和保存数据对于第一本书）
$（document）.on（'change'，'.rating_button'，function（）{
$（this）.parent ）;
}）;
}）;
CSS.SCSS
###代码不工作，当我隐藏单选按钮显示星星
form.rating_ballot input.rating_button {display：none; }
form.rating_ballot label.rating {cursor：pointer;显示：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_<％= @ 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& 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）
如果@ rating.update_attributes（params [：rating]）
respond_to do |格式|
format.js
format.html {redirect_to：back}
end
end
end
end
HELPERS
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）
如果@rating = current_user.ratings.find_by_book_id（book_id）
@rating .value
end
end
end
开发人员工具中的HTML代码
index.html.erb
###在我打开表之前
< table class =table id =book_574> _< / table>
< table class = table id =book_575> _< / table>
< table class =table id =book_576> _< / table>
###在我打开前两个表
< table class =table id =book_574>
< tbody>
< tr>
< td> TITLE< / td>
< / tr>
< tr>
< td id =rating>
< form accept-charset =UTF-8action =/ ratings / 1090class =simple_form rating_ballot
data-remote =trueid =edit_rating_1090method =post >
< div style =margin：0; padding：0; display：inline>
< input name =utf8type =hiddenvalue =✓>
< input name =_ methodtype =hiddenvalue =put>
< input name =authenticity_tokentype =hiddenvalue =JjueXU5L / l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM =>
< / div>
< input class =rating_buttonid =rating_value_1name =rating [value]type =radiovalue =1>
< label class =ratingfor =rating_value_1id =1>< span> 1< / span>< / label&
< input class =rating_buttonid =rating_value_2name =rating [value]type =radiovalue =2>
< label class =ratingfor =rating_value_2id =2>< span> 2< / span>< / label&
< input checked =checkedclass =rating_buttonid =rating_value_3name =rating [value]type =radiovalue =3>
< label class =ratingfor =rating_value_3id =3>< span> 3< / span>< / label&
< input class =rating_buttonid =rating_value_4name =rating [value]type =radiovalue =4>
< label class =ratingfor =rating_value_4id =4>< span> 4< / span>< / label&
< input class =rating_buttonid =rating_value_5name =rating [value]type =radiovalue =5>
< label class =ratingfor =rating_value_5id =5>< span> 5< / span>< / label&
< input id =book_idname =book_idtype =hiddenvalue =574>
< input name =commitstyle =display：nonetype =submitvalue =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 -8action =/ ratings / 1091class =simple_form rating_ballot
data-remote =trueid =edit_rating_1091method =post>
& div style =margin：0; padding：0; display：inlineclass =bright>
< input name =utf8type =hiddenvalue =✓>
< input name =_ methodtype =hiddenvalue =put>
< input name =authenticity_tokentype =hiddenvalue =JjueXU5L / l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM =& $ b< / div>
< input class =rating_buttonid =rating_value_1name =rating [value]type =radiovalue =1>
< label class =ratingfor =rating_value_1id =1>< span> 1< / span>< / label>
< input class = rating_buttonid =rating_value_2name =rating [value]type =radiovalue =2>
< label class =ratingfor =rating_value_2id =2>< span> 2< / span>< / label&
< input class =rating_buttonid =rating_value_3name =rating [value]type =radiovalue =3>
< label class =ratingfor =rating_value_3id =3>< span> 3< / span>< / label&
< input class =rating_buttonid =rating_value_4name =rating [value]type =radiovalue =4>
< label class =ratingfor =rating_value_4id =4>< span> 4< / span>< / label&
< input checked =checkedclass =rating_buttonid =rating_value_5name =rating [value]type =radiovalue =5>
< label class =ratingfor =rating_value_5id =5>< span> 5< / span>< / label&
< input id =book_idname =book_idtype =hiddenvalue =575>
< input name =commitstyle =display：nonetype =submitvalue =Submit>
< / form>
< / td>
< / tr>
< / tbody>
< / table>
解决方案
当然这是问题：
$（this）.parents（'form：first'）submit（）;
如果您必须呼叫：first
我会尝试这样：
$（document）.on（'change'，'.rating_button'，function（）{
$（this）.parent（）。submit（）;
}）;
I've implemented a Star Rating System using this tutorial http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3
Everything works in the SHOW PAGE, But in the INDEX PAGE, For some reason the Javascript only updates the first Book in the INDEX PAGE. And when I click other Book Ratings, it still only Updates the First Book.
Another thing that I find odd is that the code only works in the Index Page when I am not using the CSS to hide the radio buttons and replace them with Stars.
New to rails please help :)
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 (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 & 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
HELPERS
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 CODE IN DEVELOPER TOOLS
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>
解决方案
Surely this is the problem:
$(this).parents('form:first').submit();
If you've got to call :first, it means you're calling multiple elements, which is likely why you're only getting the first one submitted
You need to select individual forms, based on the buttons you're clicking
I would try this:
$(document).on('change', '.rating_button', function(){
$(this).parent().submit();
});
这篇关于星级评分系统仅更新列表上的第一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
