jquery星級評分程式碼例項詳解

antzone發表於2017-04-18
jQuery

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

下面就詳細介紹一下它的實現過程。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.star {
  width: 150px;
  height: 20px;
  margin: 20px auto;
}
.star span {
  width: 20px;
  height: 20px;
  background: #ccc;
  display: inline-block;
  cursor: pointer;
}
.star span.current {
  background: #FC0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $(".star span").click(function () {
    var _idx = $(this).index();
    $(".star span:lt(" + _idx + 1 + ")").addClass("current");
    $(".star span:gt(" + _idx + ")").removeClass("current");
  });
});
</script>
</head>
<body>
  <div class="star">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.$(".star span").click(function () {}），為span元素註冊click事件處理函式。

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

（4）.$(".star span:lt(" + _idx + 1 + ")").addClass("current"),為當前點選和之前的span元素新增current樣式類。

（5）.$(".star span:gt(" + _idx + ")").removeClass("current"),刪除當前點選右側span元素的current樣式類。

二.相關閱讀:

（1）.index()可以參閱jQuery index()一章節。

（2）.:lt選擇器可以參閱jQuery :lt一章節。

（3）.:gt選擇器可以參閱jQuery :gt一章節。

（4）.addClass()可以參閱jQuery addClass()一章節。

（5）.removeClass()可以參閱jQuery removeClass()一章節。

相關文章