js 控制 button 切换

最近做公司的一个抽奖系统，频繁的用到了两个小功能——

1. 单击实现切换按钮
2. 一列按钮，一次只能选定一个

个人觉得还是很实用的，在这里把这两个功能的实现代码贴出来。

事先声明，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+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"选中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+
                    awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span></td><td>" +
                    "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"删除"+"</span></td></tr>";
            }
            $("#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");

说明：
如有转载，请务必在开头标明出处：
http://blog.csdn.net/antony9118/article/details/53575214