jQuery類似電影院座位選取效果程式碼例項

antzone發表於2017-04-12
jQuery

去影院看過電影的朋友對於座位的選取自然不會陌生。

下面就分享一個簡單的程式碼例項，它實現了模擬效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box > div {
  width: 50px;
  height: 50px;
  background: #ff6700;
  color: #fff;
  margin: 10px;
  float: left;
  cursor: pointer;
  text-align:center;
  line-height:50px;
}
.box > div.on {
  background: #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('.box > div').click(function () {
    $(this).toggleClass('on');
    var str = '';
    $('.box > div').each(function () {
      if ($(this).hasClass('on')) {
        str += $(this).text() + '位,';
      };
    });
    var newstr = str.substring(0, str.length - 1);
    $('.text').text(newstr);
  });
});
</script>
</head>
<body>
已選中的位置有:<span class="text"></span>
<div class="box">
  <div class="i1">011</div>
  <div class="i2">012</div>
  <div class="i1">013</div>
  <div class="i2">014</div>
  <div class="i1">015</div>
  <div class="i2">016</div>
  <div class="i1">017</div>
  <div class="i2">018</div>
  <div class="i1">019</div>
  <div class="i2">020</div>
</div> 
</body>
</html>

上面的程式碼實現了才選取功能，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.$('.box > div').click(function () {})，為class屬性值為box下的div元素註冊click事件處理函式。

（3）.$(this).toggleClass('on')，實現當前點選元素class屬性值on的新增和刪除。

（4）.var str = ''，宣告一個空字串，後面會用到。

（5）.$('.box > div').each(function () {

  if ($(this).hasClass('on')) {

    str += $(this).text() + '位,';

  };

})，遍歷每一個div元素。

如果當前div元素具有class屬性值on。

那麼就將其text文字內容追加到字串str中。

（6）.var newstr = str.substring(0, str.length - 1)，作用是去掉最後的逗號。

（7）.$('.text').text(newstr)，將字串寫入span元素。

二.相關閱讀:

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

（2）.each()可以參閱jQuery each()一章節。

（3）.hasClass()可以參閱jQuery hasClass()一章節。

（4）.substring()可以參閱javascript substring()一章節。

相關文章