火车票在线选座前端部分

火车票在线选座，假设最多只能选择3个座位，在选择第四个的时候能够去掉第一个的选中状态，保证选中的总数小于或等于3.

实际效果见demo：https://leitingting08.github.io/Front-end-language/select-trainseat/index.html

html代码

<!DOCTYPE html>
<html>
<head>
    <title>火车票在线选座</title>
<style type="text/css">
    .trainseats{
    display: inline-block;
    width: 16px;
    height: 32px;
    vertical-align: middle;
    color: transparent;
    background: url(train_seat_icon.png) no-repeat;
    border-left: 1px solid #aaa;
    padding: 0 16px;
    cursor: default;
}
.seatA{background-position: 1px -5px;}
.seatB{background-position: -41px -5px;}
.seatC{background-position: -85px -5px;}
.seatD{background-position: -126px -5px;}
.seatF{background-position: -170px -5px;}
.seatC,.seatF{border-right: 1px solid #aaa;}
.active{background-position-y: -45px;}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="seat">
    窗
    <span class="trainseats seatA">A</span>
    <span class="trainseats seatB">B</span>
    <span class="trainseats seatC">C</span>
    过道
    <span class="trainseats seatD">D</span>
    <span class="trainseats seatF">F</span>
    窗
</div>
<script type="text/javascript">
    var arr=[];

$(document).on('click','.trainseats',function(){
    var index=$(this).index();
    if(!$(this).hasClass('active')){
    $(this).addClass('active');
    //把点击的index索引放进一个数组里
    arr.push(index);
    // console.log(arr);
}else{
    $(this).removeClass('active');
    //遍历数组，把第二次点击的元素移除
    $.each(arr,function(i,item){
        if(item==index){
            arr.splice(index,1);
        }
    });
}
//如果选择的座位数超过3,则移除数组中的第一个元素
if(arr.length>3){
    arr.shift();
    console.log(arr);
    $('.trainseats').removeClass('active');
    $.each(arr,function(i,item){
        $('.seat').find('.trainseats').eq(Number(item)).addClass('active');
    
    });
}

});
</script>

</body>

</html>

 

posted @ 2017-11-16 10:12  c-137Summer  阅读(863)  评论(0)  编辑  收藏  举报