javascript - 复制Yelp星级评论小部件

我试图在yelp.com上复制星级评分小部件-5星级评分小部件，当您将鼠标悬停在下一颗星星上时，所有先前的星星都会更改颜色以匹配活动的星星。还需要悬停状态，以显示星级说明。

您可以在此处查看正在运行的小部件：
https://www.yelp.com/writeareview/biz/C5SIHa89RV4Gw05zD8vLQg?return_url=%2Fwriteareview%2Fsearch%3Fwar_desc%3Dtacos%26war_loc%3DAustin%252C%2BTX

任何帮助将不胜感激！

最佳答案

结果是没有JS的结果如下：

.stars{
  displaY:inline-block;
  position:relative;
}
.stars span{
  color:#999;
  displaY:inline-block;
  vertical-align:middle;
  float:right;
  cursor:pointer;
}
.stars>span:hover:after{
  position:absolute;
  content: attr(title);
  left:100%;
}

.stars>span:nth-child(1):hover,
.stars>span:nth-child(1):hover ~ span{color: red;}
.stars>span:nth-child(2):hover,
.stars>span:nth-child(2):hover ~ span{color: #f73;}
.stars>span:nth-child(3):hover,
.stars>span:nth-child(3):hover ~ span{color: #fa2;}
.stars>span:nth-child(4):hover,
.stars>span:nth-child(4):hover ~ span{color: #eb2;}
.stars>span:nth-child(5):hover,
.stars>span:nth-child(5):hover ~ span{color: #d92;}

<div class="stars">
  <span title="WOW">&#9733;</span>
  <span title="LOL">&#9733;</span>
  <span title="Yey">&#9733;</span>
  <span title="Hmm">&#9733;</span>
  <span title="Boo">&#9733;</span>
</div>

现在，在JS或jQuery中，您只需要分配一个active类并将投票提交给服务器（就像在此jsBin demo中一样）。

编辑：

由于上面的内容可能有点问题（对CSS表示感谢），因此下面是一个主要是JS（jQuery）的示例：

var msg = ["Hover and Click to rate!","Boo","Hmm","Yey","LOL","WOW"];

$("[data-stars]").each(function(){

  var $el = $(this);
  var h   = $el.height();
  var w   = $el.width();
  var old = $el.data("stars");
  var now;
  var $info = $("<span/>");
  $el.append($info);

  function setStars( val ){
    $el.attr("data-stars", val);
    $info.text( msg[val] );
  }
  setStars( old );

  $el.on("mousemove", function(e){
    now = (e.pageX-$(this).offset().left)/w*5 +1|0;
    setStars( now );
  }).on("mouseleave", function(){
    setStars( old );
  }).on("click", function(){
    old = now;
    setStars( old );
    // Submit `old` string value ("1-5") to server using AJAX
  });

});

[data-stars]{
  display:inline-block;
  vertical-align:middle;
  position:relative;
  height:30px;
  width:150px;
  background:url(http://i.stack.imgur.com/ZpQ8g.png) 0 0 / cover;
}
[data-stars]>span{
  position:absolute;
  white-space:nowrap;
  left:100%;
  top:9px;
}
[data-stars="0"]{background-position:0    0px;}
[data-stars="1"]{background-position:0  -30px;}
[data-stars="2"]{background-position:0  -60px;}
[data-stars="3"]{background-position:0  -90px;}
[data-stars="4"]{background-position:0 -120px;}
[data-stars="5"]{background-position:0 -150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-stars=0></div><br>
<div data-stars=2></div><br>
<div data-stars=5></div><br>
<div data-stars=4></div>

关于javascript - 复制Yelp星级评论小部件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32039012/