欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實(shí)現(xiàn)五星好評

 更新時間：2017年11月18日 09:57:40   作者：安靜的對折  
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在電商網(wǎng)站，我們經(jīng)常會用到五星評分的功能，現(xiàn)在用jQuery實(shí)現(xiàn)一個簡單的demo

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>五角星評分案例</title> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
    .comment { 
      font-size: 40px; 
      color: teal; 
    } 
    .comment li { 
      float: left; 
    } 
    ul { 
      list-style: none; 
    } 
  </style> 
</head> 
<body> 
<ul class="comment"> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
</ul> 
 
<script src="jquery-1.12.2.js"></script> 
<script> 
  $(function () { 
    var wjx_k = "☆"; 
    var wjx_s = "★"; 
    //prevAll獲取元素前面的兄弟節(jié)點(diǎn)，nextAll獲取元素后面的所有兄弟節(jié)點(diǎn) 
    //end 方法；返回上一層 
    //siblings 其它的兄弟節(jié)點(diǎn) 
    //綁定事件 
    $("li").on("mouseenter", function () { 
      $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k); 
    }).on("click", function () { 
      $(this).addClass("active").siblings().removeClass("active") 
    }); 
    $("ul").on("mouseleave", function () { 
      $("li").html(wjx_k); 
      $(".active").text(wjx_s).prevAll().text(wjx_s); 
    }) 
  }); 
</script> 
</body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論