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