jq商品评价的五星效果怎么实现
1个回答
展开全部
<script type="text/javascript">
$(function(){
$("img").click(function(){
$("#score").val($(this)[0].title);
var len = $(this).prevAll('img').length;
$("img").each(function(i,obj){
if(i<=len) obj.src="images/roses.png";
});
});
});
</script>
<body>
请评分:
<img src="images/rose.png" width="" height="" border="0" title="1分">
<img src="images/rose.png" width="" height="" border="0" title="2分">
<img src="images/rose.png" width="" height="" border="0" title="3分">
<img src="images/rose.png" width="" height="" border="0" title="4分">
<img src="images/rose.png" width="" height="" border="0" title="5分">
<br><br><input type="text" name="" id="score" />
</body>
简单写了下 你可以试下效果
$(function(){
$("img").click(function(){
$("#score").val($(this)[0].title);
var len = $(this).prevAll('img').length;
$("img").each(function(i,obj){
if(i<=len) obj.src="images/roses.png";
});
});
});
</script>
<body>
请评分:
<img src="images/rose.png" width="" height="" border="0" title="1分">
<img src="images/rose.png" width="" height="" border="0" title="2分">
<img src="images/rose.png" width="" height="" border="0" title="3分">
<img src="images/rose.png" width="" height="" border="0" title="4分">
<img src="images/rose.png" width="" height="" border="0" title="5分">
<br><br><input type="text" name="" id="score" />
</body>
简单写了下 你可以试下效果
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询