Question

我正在使用fyneworks的jquery星级评分插件。问题是大约5％的时间（在初始页面加载时），星星垂直堆叠而不是水平堆叠！？

当你刷新页面时，它们很好 - 这真的很奇怪。 Please see the page here.

任何建议都将不胜感激！

由于

Answer 1

编辑：该死的，经过几次重装之后也是如此。好吧，这意味着javascript片段 - 和/或内置的javascript引擎 - 失败。尝试另一个明星插件，这个看起来过于浮雕...... 13K大小：O。

在这里，你去重做整个事情，这对我有用：

<!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>

Answer 2

在你的测试页面上使用firebug，我在这里摆脱了浮动，它运行良好。

div.rating-cancel, div.star-rating {
background:none repeat scroll 0 0 transparent;
cursor:pointer;
display:block;
/* float:left !important; */
}

Answer 3

你在onload引发后执行javascript吗？

$(document).ready(function() {
//execute JS here
});

Answer 4

通过使用不同的脚本来解决这个问题：

http://orkans-tmp.22web.net/star_rating/

Answer 5

5星评级使用PHP和JQuery的系统用于以最佳用户交互方式对任何网页上的不同产品或服务进行评级。用户可以在不重页的情况下对1-5星级的内容进行评分。我们只是举一个扫描1-5的例子，否则通过配置JQuery规模可以改变。在本例中，我们使用Raty.JS插件进行交互式演出。

<强> 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>

就是这样。我们的明星会看起来像星级评分输出

首先，我们创建了一个简单的HTML文档，并包含了Jquery和Raty JS。

以下代码用于初始化Raty的星级评分功能。

   $(document).ready(function(){
                $('.stars').raty({
                                  score: function() {
                                    return $(this).attr('data-score');
                                  }
});
    });

具有只读值的星级评分

$('.stars').raty({
                readOnly:  true
});

评分的星数 $（”星）。RATY（{ 开始：2 }）;

Onclick功能 $（”星）。RATY（{ onClick：function（score）{alert（'你的分数：'+得分）; } }）;

默认取消按钮

$('.stars').raty({
showCancel: true
});

显示半星

$('.stars').raty({
showHalf:  true
});

用户还可以通过使用onclick事件获取所选星星的值并在数据库中保持价值。 Saty Stars用户友好，几乎所有浏览器都支持（Firefox，谷歌Chrome，Safari，Ipad，Iphone，Android手机等）。 www.spjoshis.blogspot.com

jquery星级垂直

5 个答案: