jQuery星級評分效果詳解

admin發表於2018-11-28
jQuery

本章節分享一段程式碼例項，它實現了滑鼠滑過星級評分效果。

這種效果在實際應用中非常常見，下面就詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.list1 {
  list-style: none;
}
.list1 li {
  float: left;
  cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var aLi = $('.list1 li');
  var leng = aLi.length;
  var arr = ['很差', '較差', '一般', '較好', '很好'];
  var arr2 = ['demo/jQuery/img/star1.png','demo/jQuery/img/star1.png','demo/jQuery/img/star1.png',
                'demo/jQuery/img/star1.png','demo/jQuery/img/star1.png'];
  var s1 = '';
 
  aLi.click(function () {
    for (var j = 0; j < leng; j++) {
      aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star1.png');
    };
    var index = $(this).index();
    if (index < 2) {
      for (var j = 0; j <= index; j++) {
        aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star2.png');
        s1 = arr[index];
        arr2[j] = aLi.eq(j).find('img').attr('src');
      }
    } else {
      for (var j = 0; j <= index; j++) {
        aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star3.png');
        s1 = arr[index];
        arr2[j] = aLi.eq(j).find('img').attr('src');
      }
    };
 
    for (var k = index + 1; k < leng; k++) {
      arr2[k] = 'demo/jQuery/img/star1.png';
    };
    $('.s1').text(s1);
  });
 
  aLi.hover(function () {
    for (var j = 0; j < leng; j++) {
      aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star1.png');
    };
    var index = $(this).index();
    if (index < 2) {
      for (var j = 0; j <= index; j++) {
        aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star2.png');
        $('.s1').text(arr[index]);
      }
    } else {
      for (var j = 0; j <= index; j++) {
        aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star3.png');
        $('.s1').text(arr[index]);
      }
    }
  }, function () {
    for (var index = 0; index < leng; index++) {
      aLi.eq(index).find('img').attr('src', arr2[index]);
    }
    $('.s1').text(s1);
  });
})
</script>
</head>
<body>
 服務評價：
  <ul class="list1">
    <li><img src="demo/jQuery/img/star1.png"></li>
    <li><img src="demo/jQuery/img/star1.png"></li>
    <li><img src="demo/jQuery/img/star1.png"></li>
    <li><img src="demo/jQuery/img/star1.png"></li>
    <li><img src="demo/jQuery/img/star1.png"></li>
  </ul>
  <span class="s1"></span>
</body>
</html>

一.程式碼註釋:

（1）.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var aLi = $('.list1 li')，獲取li元素集合。

（3）.var leng = aLi.length，獲取li元素的數目。

（4）.var arr = ['很差', '較差', '一般', '較好', '很好']，陣列中存放的是幾個檔次評論語。

（5）.var arr2 = ['demo/jQuery/img/star1.png','demo/jQuery/img/star1.png','demo/jQuery/img/star1.png','demo/jQuery/img/star1.png','demo/jQuery/img/star1.png']，存放預設灰色星星的圖示路徑，後面會用到。

（6）.var s1 = ''，宣告一個變數並賦值為空，後面會用到。

（7）.aLi.click(function () {})，為li元素註冊click事件處理函式，也就是點選以後評分效果就固定了，否則滑鼠離開，評分效果就失效。

（8）.for (var j = 0; j < leng; j++) {  aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star1.png');

}，通過迴圈的方式將每一個li元素的img標籤的src屬性值設定為demo/jQuery/img/star1.png，也就是預設的灰色。

（9）.var index = $(this).index()，獲取當前點選li元素的索引值。

（10）.if (index < 2) {  

  for (var j = 0; j <= index; j++) {

    aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star2.png');

    s1 = arr[index];

    arr2[j] = aLi.eq(j).find('img').attr('src');

  }

} else {

  for (var j = 0; j <= index; j++) {

    aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star3.png');

    s1 = arr[index];

    arr2[j] = aLi.eq(j).find('img').attr('src');

  }

}

當點選的星星是前兩的時候，就將當前星星和之前的星星變換成黑色。

並且將對應索引的評語賦值給變數s1.

然後將黑色星星的圖示路徑存入對應索引的arr2陣列，這也就是為什麼點選之後能夠保留星級評分效果的功能。

（11）.for (var k = index + 1; k < leng; k++) {

  arr2[k] = 'demo/jQuery/img/star1.png';

}，將arr2陣列對應索引的圖示路徑設定為灰色。

（12）.$('.s1').text(s1)，顯示檔次評語。

（13）.aLi.hover(function () {},function(){})，規定滑鼠滑入和滑出的要執行的函式。

（14）.for (var j = 0; j < leng; j++) {

  aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star1.png');

}，先將所有星星重置為灰色。

（15）.var index = $(this).index()，獲取當前滑鼠懸浮的星星的索引值。

（16）.var index = $(this).index();

  if (index < 2) {

    for (var j = 0; j <= index; j++) {

      aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star2.png');

      $('.s1').text(arr[index]);

    }

  } else {

  for (var j = 0; j <= index; j++) {

    aLi.eq(j).find('img').attr('src', 'demo/jQuery/img/star3.png');

    $('.s1').text(arr[index]);

  }

}原理在上面已經有介紹。

（17）.for (var index = 0; index < leng; index++) {

  aLi.eq(index).find('img').attr('src', arr2[index]);

}

$('.s1').text(s1);

當滑鼠滑出之後，就將arr2陣列的圖示路徑依次賦值給各個圖片。

這也就是點選星星之後，滑鼠離開能夠儲存評級狀態的原因。

二.相關閱讀：

（1）.eq()可以參閱jQuery eq()方法一章節。

（2）.find()可以參閱jQuery find()方法一章節。

（3）.attr()可以參閱jQuery attr()方法一章節。

（4）.index()可以參閱jQuery index()方法一章節。

（5）.hover()可以參閱jQuery hover事件一章節。

相關文章