>웹 프론트엔드 >JS 튜토리얼 >Jquery를 사용하여 별 5개 칭찬을 받는 방법에 대해

Jquery를 사용하여 별 5개 칭찬을 받는 방법에 대해

小云云
小云云원래의
2017-12-19 17:03:011389검색

전자상거래 웹사이트에서는 별 5개 등급 기능을 자주 사용합니다. 이 글에서는 주로 jquery를 기반으로 별 5개 등급을 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 좋겠습니다. 모두를 도울 수 있습니다. now jQuery를 사용하여 간단한 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获取元素前面的兄弟节点,nextAll获取元素后面的所有兄弟节点 
    //end 方法;返回上一层 
    //siblings 其它的兄弟节点 
    //绑定事件 
    $("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>
related 권장 사항을 구현합니다.


javaScript 및 jQuery는 자동로드를 구현하기위한 jQuery ajquery ajquery 부분 새로 고침 examply


jquery 작동 확인란을 구현합니다. 여러 선택을 구현하십시오. 확인되지 않은 인스턴스 포함

위 내용은 Jquery를 사용하여 별 5개 칭찬을 받는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.