最近做公司的一個抽獎系統，頻繁的用到瞭兩個小功能——

單擊實現切換按鈕 一列按鈕，一次隻能選定一個

個人覺得還是很實用的，在這裡把這兩個功能的實現代碼貼出來。

事先聲明，css用的是adminlte和bootstrap原生的，js裡面還用到瞭layer彈窗，layer是非常方便好用的彈窗插件，會在以後的博客中有引申說明。

1 單擊切換按鈕

抽獎以前，後臺的抽獎按鈕應該是這個樣子的

開始之後，就要變成

為什麼要這麼做呢？反正這個控制按鈕不是觀眾能看到的，隻有後臺控制人員才能看到。

這樣做主要是為瞭防止操作失誤。試想，如果控制臺的工作人員點瞭“開始抽獎”，想要結束的時候一不小心點錯瞭，又點到“開始抽獎”瞭，那就不知道觀眾在前臺會看到什麼結果瞭。。。。因此，讓“開始抽獎”與“結束抽獎”互斥存在，是有效防止操作失誤的方法。

html代碼

button(class="btn btn-info" id="Start" onclick="startLottery()",style="display:block;width:100px;margin-left:2%;") 開始抽獎
button(class="btn btn-danger" id="End" onclick="endLottery()",style="display:none;width:100px;margin-left:2%;") 結束抽獎

js代碼

function startLottery() {
    $("#Start").css("display","none");
    $("#End").css("display","block");
}
function endGift() {
    $("#Start").css("display","block");
    $("#End").css("display","none");
}

2 一列按鈕，一次隻能選定一個

要抽獎的時候，後臺工作人員要選中某個獎品，然後再點擊“開始抽獎”，在獎品列表的每一行最前面加一個“選中”按鈕來實現該功能。那麼，如何選中其中一個的時候，其它都是灰色呢？

首先說一下獎品列表是怎麼來的吧。從數據庫中讀出所有獎品展示在頁面的時候，是在js裡面將html拼成一個列表

function refreshPage(){
    $.ajax({
        type: "post",
        url : getContextPath() + "/award/getAllAwards",
        dataType:'json',
        data: {
        },
        success: function(data){
            var awards = data.data;
            var awardHtml = "";
            var iLen = awards.length;
            for(var i = iLen - 1 ; i >=0  ; i--){
                awardHtml+=""+"選中"+""+awards[i].awName+""+awards[i].awDescription+""+
                    awards[i].awUserCount+""+awards[i].awKind+""+"編輯"+"" +
                    ""+"刪除"+"";
            }
            $("#awardTable").html(awardHtml);
        }
    });
}

前端頁面上。隻需要有一個

tbody#awardTable

就可以把數據庫中取出來的獎品列表循環放到這個 tbody 裡面。

註意那個js裡面的html拼接，給每一個選中按鈕都加瞭一個id，這個id就是我們控制一次隻能有一個獎品被選中的關鍵。

function selectAward(i,iLen){
    $.ajax({
        type: "post",
        url : getContextPath() + "/config/setCurrentAward",
        dataType:'json',
        data: {
            "awardId":awards[i].id
        },
        success: function(data){
            var selectSuccess = data.data;
            if(selectSuccess){
                var spanId = "span"+i;
                $("#"+spanId).attr("class","label label-success");
                for(var m = iLen - 1 ; m >=0  ; m--){
                    if(m!=i){
                        var otherSpanId = "span"+m;
                        $("#"+otherSpanId).attr("class","label label-default");
                    }
                }
            }else{
                layer.msg('選中失敗', {
                    time: 500, //20s後自動關閉
                });
            }
        }
    });
}

最關鍵的兩句代碼就是

$("#"+spanId).attr("class","label label-success");
$("#"+otherSpanId).attr("class","label label-default");