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

更新時(shí)間：2017年11月18日 09:57:40 作者：安靜的對(duì)折

這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五星好評(píng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>五角星評(píng)分案例</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>

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

您可能感興趣的文章:

相關(guān)文章

Java中Timer的用法詳解
Timer是比較常用的工具類，用于按時(shí)間計(jì)劃執(zhí)行任務(wù)。這篇文章給大家介紹java中的timer的用法詳解，涉及到j(luò)ava timer相關(guān)知識(shí)學(xué)習(xí)，對(duì)本文感興趣的朋友可以參考下本篇文章
2015-10-10
jQuery實(shí)現(xiàn)信息提示框(帶有圓角框與動(dòng)畫)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)信息提示框效果,帶有圓角框與動(dòng)畫功能,點(diǎn)擊上面按鈕實(shí)現(xiàn)對(duì)應(yīng)文字的漸變顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-02-02
jQuery 三擊事件實(shí)現(xiàn)代碼
jQuery 中自帶有雙擊事件，那么當(dāng)需要三擊某對(duì)象執(zhí)行某個(gè)事件時(shí)怎么辦呢？今天就讓我們看看一段 jQuery 三擊事件代碼
2013-09-09
jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
淺談jQuery中的eq()與DOM中element.[]的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談jQuery中的eq()與DOM中element.[]的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼
這篇文章主要介紹了jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
Axios和Jquery實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了Axios+Jquery實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-08-08
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個(gè)樣式屬性，可先定義屬性變量，然后直接賦值給css()方法
2014-09-09