JS は星評価を実装します-jsチュートリアル-php.cn

JS は星評価を実装します

php中世界最好的语言

リリース： 2018-04-19 09:20:50

オリジナル

2908 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。