Question

如果我点击一个更高或更低的星级，如何点击它并改变它之后如何保持星形颜色？

我想为我的网站创建一个Staring组件

我可以看到星星的颜色发生了变化，但点击它不会留下的星星。

<HTML>
<head>
.star{
  float:left;
  height: 100%;
  width: 20%;
}

#container{
  background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
  width: 226px;
  height: 50px;
}
</head>
<body ng-app="RatingApp" ng-controller="RatingCtrl" ng-init="rating = star.rating + 1">
  <div id="container">
  <div id="1" class="star"></div>
  <div id="2" class="star"></div>
  <div id="3" class="star"></div>
  <div id="4" class="star"></div>
  <div id="5" class="star"></div>
</div>
</body>
</html>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>$("#1").mouseover(function(){
  $("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
  $("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
  $("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
  $("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
  $("#container").css('background-position', '0px -190px');
});

$(".star").mouseout(function(){
  $("#container").css('background-position', '0px 0px');
});</script>

Answer 1

一种解决方案是在点击星标时保存评级。到目前为止，你根本没有收听点击事件。您可以通过添加处理程序

来完成此操作

$('#1').click(function(){
    //your code here
});

当鼠标移出时，您可以将背景位置恢复为0而不是最后点击的评级。

以下是有关如何执行此操作的示例：http://jsfiddle.net/e8hffqs5/

点击后如何保持Star Colored？

1 个答案: