jquery星级垂直
[英]jquery star rating vertical
问题描述
I'm using the jquery star rating plugin by fyneworks. 
我正在使用fyneworks的jquery星级评级插件。 The problem is that about 5% of the time (and on the initial page load), the stars stack vertically instead of horizontally!? 问题是大约5％的时间（和初始页面加载时），星星垂直堆叠而不是水平堆叠！？
When you refresh the page, they are fine - which is really odd. 当你刷新页面时，它们很好 - 这真的很奇怪。 Please see the page here. 请看这里的页面。
Any suggestions would be greatly appreciated! 任何建议将不胜感激！
Thanks 谢谢
5 个解决方案
解决方案1
1 2010-07-01 17:36:44
EDIT: Damn, this does the same after a few reloads. 编辑：该死的，经过几次重装后，这样做也是如此。 Well, this means that the javascript snippet - and/or built in javascript engine - fail. 好吧，这意味着javascript片段 - 和/或内置的javascript引擎 - 失败。 Try another star plugin, this one looks overbloated... 13K in size :O. 尝试另一个明星插件，这个看起来过于浮夸...... 13K大小：O。
Here, you go, redone the whole thing, this works for me: 在这里，你去重做整个事情，这对我有用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js' type="text/javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="Clear">
<input name="star1" type="radio" class="star {split:2}" value="0.5/5"/>
<input name="star1" type="radio" class="star {split:2}" value="1/5"/>
<input name="star1" type="radio" class="star {split:2}" value="1.5/5"/>
<input name="star1" type="radio" class="star {split:2}" value="2/5"/>
<input name="star1" type="radio" class="star {split:2}" value="2.5/5"/>
<input name="star1" type="radio" class="star {split:2}" value="3/5" checked="checked"/>
<input name="star1" type="radio" class="star {split:2}" value="3.5/5"/>
<input name="star1" type="radio" class="star {split:2}" value="4/5"/>
<input name="star1" type="radio" class="star {split:2}" value="4.5/5"/>
<input name="star1" type="radio" class="star {split:2}" value="5/5"/>
</div>
<button class="rate" type="submit" title="Submit your rating">Rate!</button>
</body>
</html>
解决方案2
0 2015-01-19 03:45:28
5 star rating System using PHP and JQuery is used to rate different products or services on any web page in best user interactive way. 5星评级使用PHP和JQuery的系统用于以最佳用户交互方式对任何网页上的不同产品或服务进行评级。 User can rate content on scale of 1-5 star without reloading page. 用户可以在不重页的情况下对1-5星级的内容进行评分。 We just take an example of scan 1-5 otherwise by configuring JQuery scale can be change. 我们只是举一个扫描1-5的例子，否则通过配置JQuery规模可以改变。 In this Example we have used Raty.JS plugin for interactive stars. 在这个例子中，我们使用了Raty.JS插件用于交互式星星。
STEP-1 Create simple html file as shown below STEP-1创建简单的html文件，如下所示
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script type="text/javascript">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://testweb3.iecworld.com/jsdemo/js/lq_js_point/js/jquery.raty.min.js"></script>
// Initialise Plugin
$(document).ready(function(){
$('.stars').raty({
score: function() {
return $(this).attr('data-score');
}
});
});
</script>
</head>
<body>
<b>Star Rating Demo</b>
<div class=”stars”></div>
</body>
</html>
That's it. 而已。 Our stars will look something like Star Rating Output 我们的明星看起来像星级评分输出
First of all we have created a simple HTML Document and have included Jquery and Raty JS. 首先，我们创建了一个简单的HTML文档，并包含了Jquery和Raty JS。
Below code used to initialize Raty for star rating functionality. 下面的代码用于初始化Raty的星级功能。
$(document).ready(function(){
$('.stars').raty({
score: function() {
return $(this).attr('data-score');
}
});
});
Star rating with read only value 星级评分，只读值
$('.stars').raty({
readOnly: true
});
Number of Stars for rating $('.stars').raty({ start: 2 }); 评分为$（'。stars'）的星数.raty（{start：2}）;
Onclick functionality $('.stars').raty({ onClick: function(score) { alert('Your Score: ' + score); } }); Onclick功能$（'。stars'）。raty（{onClick：function（score）{alert（'Your Score：'+ score）;}}）;
Default cancel button 默认取消按钮
$('.stars').raty({
showCancel: true
});
Displaying Half Stars 显示半星
$('.stars').raty({
showHalf: true
});
User can also get value of selected stars and maintain value in database by using onclick event. 用户还可以通过使用onclick事件获取所选星星的值并在数据库中保持价值。 Saty Stars are user friendly and supported by almost all browsers (Firefox, Google Chrome, Safari, Ipad, Iphone, Android Phone etc.). Saty Stars用户友好，几乎所有浏览器都支持（Firefox，谷歌Chrome，Safari，Ipad，Iphone，Android手机等）。 www.spjoshis.blogspot.com www.spjoshis.blogspot.com
解决方案3
0 2010-07-01 16:26:05
Using firebug on your test page, I got rid of the float here and it worked fine. 在你的测试页面上使用firebug，我摆脱了漂浮在这里，它工作正常。
div.rating-cancel, div.star-rating {
background:none repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
/* float:left !important; */
}
解决方案4
0 2010-07-01 16:49:11
Do you execute the javascript after onload fires? 在onload触发后你执行javascript吗？
$(document).ready(function() {
//execute JS here
});
解决方案5
0 已采纳 2010-07-13 08:19:26
Solved this myself by using a different script from here instead: 通过使用不同的脚本来解决这个问题：
http://orkans-tmp.22web.net/star_rating/ http://orkans-tmp.22web.net/star_rating/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.