JQuery评分控件

最新推荐文章于 2024-08-18 10:20:51 发布

疯狂的自学者

最新推荐文章于 2024-08-18 10:20:51 发布

阅读量547

点赞数

本文链接：https://blog.csdn.net/weixin_41608454/article/details/79336871

版权

 
  <!DOCTYPE html> 
 
 
  < 
  html 
    
  lang 
  = 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
   < 
  meta 
    
  charset 
  = 
  "UTF-8" 
  > 
 
 
   < 
  meta 
    
  name 
  = 
  "viewport" 
    
  content 
  = 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
   < 
  meta 
    
  http-equiv 
  = 
  "X-UA-Compatible" 
    
  content 
  = 
  "ie=edge" 
  > 
 
 
   < 
  title 
  >评分控件</ 
  title 
  > 
 
 
    
  < 
  script 
    
  src 
  = 
  './jquery.js' 
  > 
  < 
  / 
  script 
  > 
 
 
    
  < 
  style 
  > 
 
 
    
  li 
  { 
  list-style 
  :  
  none 
  ; 
  float 
  : 
  left 
  ; 
  width 
  : 
  30 
  px 
  ;} 
 
 
   < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
   < 
  ul 
  > 
 
 
   < 
  li 
    
  class 
  = 
  "item" 
  >☆</ 
  li 
  > 
 
 
   < 
  li 
    
  class 
  = 
  "item" 
  >☆</ 
  li 
  > 
 
 
   < 
  li 
    
  class 
  = 
  "item" 
  >☆</ 
  li 
  > 
 
 
   < 
  li 
    
  class 
  = 
  "item" 
  >☆</ 
  li 
  > 
 
 
   < 
  li 
    
  class 
  = 
  "item" 
  >☆</ 
  li 
  > 
 
 
   </ 
  ul 
  > 
 
 
    
  < 
  script 
  > 
 
 
    
  $ 
  ( 
  function 
  (){ 
 
 
    
  $ 
  ( 
  '.item' 
  ). 
  hover 
  ( 
  function 
  ( 
  e 
  ){ 
 
 
    
  $ 
  ( 
  this 
  ). 
  text 
  ( 
  '★' 
  ). 
  prevAll 
  (). 
  text 
  ( 
  '★' 
  ); 
 
 
   }, 
  function 
  ( 
  e 
  ){ 
 
 
    
  $ 
  ( 
  this 
  ). 
  text 
  ( 
  '☆' 
  ). 
  nextAll 
  (). 
  text 
  ( 
  '☆' 
  ); 
 
 
   }). 
  on 
  ( 
  'click' 
  , 
  function 
  ( 
  e 
  ){ 
 
 
    
  $ 
  ( 
  this 
  ). 
  addClass 
  ( 
  'cur' 
  ). 
  siblings 
  (). 
  removeClass 
  ( 
  'cur' 
  ); 
  //获取当前点击的li 
 
 
   }); 
 
 
    
  $ 
  ( 
  'ul' 
  ). 
  on 
  ( 
  'mouseleave' 
  , 
  function 
  ( 
  e 
  ){ 
 
 
    
  $ 
  ( 
  'ul li.cur' 
  ). 
  text 
  ( 
  '★' 
  ). 
  prevAll 
  (). 
  text 
  ( 
  '★' 
  ). 
  end 
  (). 
  nextAll 
  (). 
  text 
  ( 
  '☆' 
  ); 
 
 
   }); 
 
 
   }) 
 
 
   < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 