JQ票选小例子

函数状态的多重判断，
数组的动态生成，
数组的动态判断及函数的停止时刻判断
arr.sort(compareFunction).reverse()应用
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
        font-size: 20px;
    }
    .contain{
        position: absolute;
        top: 50px;
        left: 30px;
        height: 300px;
        /*width:100%;*/
        /*background-color:yellow;*/
    }
    .pp{
        line-height: 50px;
        color: #fff;
        margin-top: 10px;
        height: 50px;
        width: 250px;
        background-color: green;
        border-radius:0px 15px 15px 0px; 
    }
    .tp{
        border-radius:10px 15px 15px 10px; 
        text-align: center;
        margin-left: 20px;
        line-height: 40px;
        margin-top: 5px;
        background-color: #000;
        color: #fff;
        height: 40px;
        width: 50px;
    }
    p{
        float: left;
    }
    </style>
</head>
<body id="test">
    <div class="contain">
        <div>
            <p>第&nbsp&nbsp&nbsp</p>
            <p>1</p>
            <p>&nbsp&nbsp轮投票</p>
    </div></br>
        <div class="pp"  id="hd1">
            <p>0</p>
            <p class="tp">投票</p>
        <p>&nbsp&nbsp&nbsp候选人一</p>
    </div></br>
        <div class="pp"  id="hd2">
            <p>0</p>
            <p class="tp">投票</p>
            <p>&nbsp&nbsp&nbsp候选人二</p>
        </div></br>
        <div class="pp"  id="hd3">
            <p>0</p>
            <p class="tp">投票</p>
            <p>&nbsp&nbsp&nbsp候选人三</p>
        </div></br>
        <div class="pp"  id="hd4">
            <p>0</p>
            <p class="tp">投票</p>
            <p>&nbsp&nbsp&nbsp候选人四</p>
        </div></br>
        <div>
            <p>剩余</p>
            <p>7</p>
        <p>张选票</p>
    </div>
    </div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
    var a=0;
    var b=0;
    var c=0;
    var d=0;
    var num=7;
    var nnn=1;

    $('.tp').click(function(){
        var index=$(this).parent().index();
        // console.log(index)
        if (index==2) {
            if (num>0) {
                $(this).parent().parent().children().eq(index).children().eq(0).html(++a);
                $(this).parent().css({'width':'+=40px'})
                $(this).parent().parent().children().eq(10).children().eq(1).html(--num);
            }

        }
        else if (index==4) {
            if (num>0) {
                $(this).parent().parent().children().eq(index).children().eq(0).html(++b);
                $(this).parent().css({'width':'+=40px'})
                $(this).parent().parent().children().eq(10).children().eq(1).html(--num);
            }
        }
        if (index==6) {
            if (num>0) {
                $(this).parent().parent().children().eq(index).children().eq(0).html(++c);
                $(this).parent().css({'width':'+=40px'})
                $(this).parent().parent().children().eq(10).children().eq(1).html(--num);
            }
        }
        if (index==8) {
            if (num>0) {
                $(this).parent().parent().children().eq(index).children().eq(0).html(++d);
                $(this).parent().css({'width':'+=40px'})
                $(this).parent().parent().children().eq(10).children().eq(1).html(--num);
            }
        }
        if (num==0) {
            var arr=[a,b,c,d];
            console.log(a);
            function compareFunction (x, y) { 
            if (x < y) { return -1;} 
            else if (x > y) { return 1;} 
            else { return 0;} 
        }
            var max = arr.sort(compareFunction).reverse()[0];
            // console.log(max);
            // console.log(arr.length);
            console.log(max);
            if ((a==max&&b<max&&c<max&&d<max)||(a<max&&b==max&&c<max&&d<max)||(a<max&&b<max&&c==max&&d<max)||(a<max&&b<max&&c<max&&d==max)) {
                // break;
                $('.tp').off("click");
                if (a<max) {
                console.log(1)
                $('#hd1').hide();
            }
            if (b<max) {
                console.log(1)
                $('#hd2').hide();
            }
            if (c<max) {
                console.log(1)
                $('#hd3').hide();
            }
            if (d<max) {
                console.log(1)
                $('#hd4').hide();
            }
            }
            else{
                if (a<max) {
                console.log(1)
                $('#hd1').hide();
            }
            if (b<max) {
                console.log(1)
                $('#hd2').hide();
            }
            if (c<max) {
                console.log(1)
                $('#hd3').hide();
            }
            if (d<max) {
                console.log(1)
                $('#hd4').hide();
            }
            num+=7;
            $(this).parent().parent().children().eq(0).children().eq(1).html(++nnn);
            $(this).parent().parent().children().eq(10).children().eq(1).html(num);
            }
        }
    })
</script>
</body>
</html>
这里写图片描述
猜你喜欢
