如何使用jquery为简单星型插件添加动态值
我想给动态数字，当我尝试从javascript动态添加时，它不起作用。请找到我下面的代码，不确定我在这里做错了什么：有人能帮我解释一下为什么我的动态div没有显示在html中吗？如果我把alert语句放进去，我得到的是正确的div元素标记，但由于某些原因它没有附加到html标记上如何使用jquery为简单星型插件添加动态值,jquery,rating,Jquery,Rating,我想给动态数字，当我尝试从javascript动态添加时，它不起作用。请找到我下面的代码，不确定我在这里做错了什么：有人能帮我解释一下为什么我的动态div没有显示在html中吗？如果我把alert语句放进去，我得到的是正确的div元素标记，但由于某些原因它没有附加到html标记上 <html> <head> <meta charset="UTF-8"> <title>Raterater Demo</title> <
<html>
<head>
<meta charset="UTF-8">
<title>Raterater Demo</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/css/rating/raterater.css" rel="stylesheet"/>
<style>
/* Override star colors */
.raterater-bg-layer {
color: rgba( 0, 0, 0, 0.25 );
}
.raterater-hover-layer {
color: rgba( 255, 255, 0, 0.75 );
}
.raterater-hover-layer.rated {
color: rgba( 255, 255, 0, 1 );
}
.raterater-rating-layer {
color: rgba( 255, 155, 0, 0.75 );
}
.raterater-outline-layer {
color: rgba( 0, 0, 0, 0.25 );
}
</style>
<script>
function loadstar() {
var rate1= document.createElement('div');
var starid=0;
var starrating=3.8;
rate1.innerHTML = "<div class='ratebox' data-id="+starid+" data-rating="+ starrating+"></div>";
document.getElementById('rating111').appendChild(rate1);
$("#rating111").append(rate1.innerHTML);
alert( "div value" + rate1.innerHTML);
}
</script>
</head>
<body onload="loadstar()">
<!-- Lets add some rating boxes
<div class="ratebox" data-id="2" data-rating="3.5"></div>
-->
<div id="rating111">
</div>
<!-- We need jquery and raterater.jquery.js -->
<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script src="/js/rating/raterater.jquery.js"></script>
<script>
/* This is out callback function for when a rating is submitted
*/
function rateAlert(id, rating)
{
alert( 'Rating for '+id+' is '+rating+' stars!' );
}
/* Here we initialize raterater on our rating boxes
*/
$(function() {
$( '.ratebox' ).raterater( {
submitFunction: 'rateAlert',
allowChange: true,
starWidth: 100,
spaceWidth: 10,
numStars: 5
} );
});
</script>
</body>
</html>
评分员演示
/*覆盖星色*/
.Rater bg层{
颜色：rgba（0,0,0,0.25）；
}
.Rater悬停层{
颜色：rgba（255,255,0,0.75）；
}
.rater-hover-layer.rated{
颜色：rgba（255,255,0,1）；
}
.Rater评级层{
颜色：rgba（255,155,0,0.75）；
}
.Rater大纲层{
颜色：rgba（0,0,0,0.25）；
}
函数loadstar（）{
var rate1=document.createElement（'div'）；
var-starid=0；
var starrating=3.8；
rate1.html=“”；
document.getElementById（'rating111'）。appendChild（rate1）；
$（“#评级111”）.append（rate1.innerHTML）；
警报（“div值”+rate1.innerHTML）；
}
/*这是提交评级时的out回调函数
*/
功能等级警报（id、等级）
{
警报（“+id+”的评级为“+Rating+”stars！”）；
}
/*这里，我们在评级框中初始化Rater
*/
$（函数（）{
$（“.ratebox”）.rater（{
submitFunction:“rateAlert”，
允许更改：正确，
星宽：100，
空间宽度：10，
numStars:5
} );
});