今回は、JS でスター評価を実装するための 注意点 について説明します。実際のケースを見てみましょう。
シンプルですが、注意すべき点がいくつかあります:
1. ホバー効果は、クリックされていない場合、マウスの移動に応じて星が点灯します。
2. をクリックしてホバー効果をオフにします。
3. 同じ星をクリックすると、いつでも星の色を変更できます。
特定のコード表示:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> </head> <style type="text/css"> .stars{ white-space: nowrap; text-align: center; margin-top: 20px; margin-bottom: 20px; } .stars li{ display: inline-block; color:#ADADAD; font-size: 40px; } </style> <body> <ul class="stars"> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> </ul> <script src="../../js/common/jquery-git.js"></script> <script> $(function() { //为星星设置hover效果 varisClicked =false; varbeforeClickedIndex = -1; varclickNum = 0;//点击同一颗星次数 $('li').hover( function() { if(!isClicked) { $(this).css('color','#F0AD4E'); varindex = $(this).index(); for(vari = 0; i <= index; i++) { $('li:nth-child('+ i +')').css('color','#F0AD4E'); } } }, function() { if(!isClicked) { $('li').css('color','#ADADAD'); } } ); //星星点击事件 $('li').click(function() { $('li').css('color','#ADADAD'); isClicked =true; varindex = $(this).index(); for(vari = 1; i <= index+1; i++) { $('li:nth-child('+ i +')').css('color','#F0AD4E'); } if(index == beforeClickedIndex) {//两次点击同一颗星星 该星星颜色变化 clickNum++; if(clickNum % 2 == 1) { $('li:nth-child('+ (index + 1) +')').css('color','#ADADAD'); }else{ $('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E'); } }else{ clickNum = 0; beforeClickedIndex = index; } }); }); </script> </body> </html>
この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
以上がJS は星評価を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。