誰有寫好的出效果了的源碼啊,我對著視頻寫了好幾遍都不出效果,求助大神?。?!
星級評分--第一種實現(xiàn)方式?{ ????????:?:?} ????{ ????????:?} ????.{ ????????:?:?:?} ????.{ ????????:?:?:?:()??:?} ?num=??$rating=()?$item=$rating.()?=(num){ ????????$item.((index){ ????????????(index<num){ ????????????????().()?}{ ????????????????().()?} ????????})?} ????(num)?$item.((){ ????????(().()+)?}).((){ ????????num=().()+?})?$rating.((){ ????????(num)?})
2018-05-29
拿走,不謝。有興趣的可以來這里看看:https://github.com/CruxF/IMOOC
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>星級評分之第一種寫法</title>
? ? <style>
? ? ? body, ul, li {
? ? ? ? padding: 0;
? ? ? ? margin: 0;
? ? ? }
? ? ? li {
? ? ? ? list-style: none;
? ? ? }
? ? ? .rating {
? ? ? ? width: 190px;
? ? ? ? height: 32px;
? ? ? ? margin: 100px auto;
? ? ? }
? ? ? .rating-item {
? ? ? ? display: inline-block;
? ? ? ? width: 32px;
? ? ? ? height: 32px;
? ? ? ? background: url(img/star.png) no-repeat;
? ? ? ? cursor: pointer;
? ? ? }
? ? </style>
? ? <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
? </head>
? <body>
? ? <ul class="rating" id="rating">
? ? ? <li class="rating-item" title="十分不好"></li>
? ? ? <li class="rating-item" title="不好"></li>
? ? ? <li class="rating-item" title="一般"></li>
? ? ? <li class="rating-item" title="十分不好"></li>
? ? ? <li class="rating-item" title="很好"></li>
? ? </ul>
? ? <script>
? ? ? //緩存、jQuery對象與DOM對象
? ? ? var num = 2;
? ? ? var $rating = $('#rating')
? ? ? var $item = $rating.find('.rating-item');
? ? ? // 點亮
? ? ? var lightOn = function(num) {
? ? ? ? $item.each(function(index) {
? ? ? ? ? if(index < num) {
? ? ? ? ? ? $(this).css('background-position', '0 -40px');
? ? ? ? ? } else {
? ? ? ? ? ? $(this).css('background-position', '0 0');
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? ? // 初始化
? ? ? lightOn(num);
? ? ? // 事件綁定
? ? ? $item.on('mouseover', function() {
? ? ? ? console.log($(this).index());
? ? ? ? lightOn($(this).index() + 1);
? ? ? }).on('click', function() {
? ? ? ? num = $(this).index() + 1;
? ? ? });
? ? ? $rating.on('mouseout', function() {
? ? ? ? lightOn(num);
? ? ? })
? ? </script>
? </body>
</html>
2018-05-03
你這是什么鬼?