快捷導(dǎo)航

jQuery實現(xiàn)的五星點評功能【案例】

更新時間：2019年02月18日 09:06:44 作者：庚中

這篇文章主要介紹了jQuery實現(xiàn)的五星點評功能,結(jié)合具體實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)五星點評功能相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的五星點評功能。分享給大家供大家參考，具體如下：

效果圖:

需求分析：

1.鼠標(biāo)移入li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?
2.鼠標(biāo)移開,所有的li標(biāo)簽變?yōu)榭招?
3.鼠標(biāo)點擊li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?/p>

jq代碼實現(xiàn)過程:

var shiXin="★";
 var kongXin='☆'
 $('li').on('mouseenter',function ( ) {
  //需求1:鼠標(biāo)移入后,當(dāng)前的li標(biāo)簽和前面的li標(biāo)簽顯示實心,后面的li標(biāo)簽顯示空心
  $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
 }).on('mouseleave',function ( ) {
  $('li').text(kongXin);
  //找到索引的li,給這個li和它前面的li設(shè)置實心
  $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
 }).on('click',function ( ) {
  //給點擊的li添加索引,其余的去除索引
   $(this).attr('index','dianji').siblings().removeAttr('index')
 })

完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.dbjr.com.cn jQuery五星點評</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  ul {
   list-style:none
  }
  li {
   float:left;
   cursor: pointer;
   color: red;
   font-size: 40px;
  }
 </style>
</head>
<body>
<ul>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
 <li>☆</li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $ ( function () {
   /*一：需求分析： 1.鼠標(biāo)移入li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?
         2.鼠標(biāo)移開,所有的li標(biāo)簽變?yōu)榭招?
         3.鼠標(biāo)點擊li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?
    二：思路分析
      1.獲取元素
      2.注冊事件
      3.事件處理
   */
  /*  var shiXin='★';
   var kongXin='☆';
    $ ( "li" ).on ( "mouseenter", function () {
    // 1.鼠標(biāo)移入li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?后面的五角星變?yōu)榭招?這一步必須要,不然往前移會有bug)
     $ ( this ).text ( shiXin ).prevAll ().text ( shiXin ).end().nextAll ().text(kongXin)
     //end()方法是返回上一個狀態(tài)的返回值
    } ).on ( "mouseleave", function () {
    //2.鼠標(biāo)移開,所有的li標(biāo)簽變?yōu)榭招?
    $('li').text(kongXin);
    $ ( 'li[index="dianji"]' ).text(shiXin).prevAll().text(shiXin);
      //
    } ).on('click',function ( ) {
     //3.鼠標(biāo)點擊li標(biāo)簽,當(dāng)前l(fā)i標(biāo)簽和之前的li標(biāo)簽全部變?yōu)閷嵭?
    //給點擊的li添加索引
     $(this).attr('index','dianji').siblings().removeAttr('index');
    })*/
  //第二遍:
   var shiXin="★";
   var kongXin='☆'
   $('li').on('mouseenter',function ( ) {
    //需求1:鼠標(biāo)移入后,當(dāng)前的li標(biāo)簽和前面的li標(biāo)簽顯示實心,后面的li標(biāo)簽顯示空心
    $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
   }).on('mouseleave',function ( ) {
    $('li').text(kongXin);
    //找到索引的li,給這個li和它前面的li設(shè)置實心
    $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);
   }).on('click',function ( ) {
    //給點擊的li添加索引,其余的去除索引
     $(this).attr('index','dianji').siblings().removeAttr('index')
   })
  } )
 </script>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: