javascript - 随机数添加类

Question

  js代码中，有？？的地方，我利用随机数，可以改变内容，但是却无法添加类？请问为什么？
    *html：
    <p id="myCalendar">
        <ul class="myDate children_left_float">
        <!--<li class="current"><p><span>1</span><span>JAN</span></p></li>-->
        </ul>
        <ul class="myFestival">
            <li>
                <p><span>1</span>月节日</p>
                <p>元旦节：1月1日到3日放假3天</p>
                <!--标题p[0]换成h2-->
            </li>
        </ul></p>
    *css：
    #myCalendar {
        width: 240px;
        margin: 10px auto;
        padding: 10px 0 10px 10px;
        background-color: #CCCCCC;
    }
    
    #myCalendar .myDate li {
        width: 28px;
        height: 28px;
        line-height: 14px;
        text-align: center;
        background-color: #424242;
        color: #fff;
        margin: 0 10px 10px 0;
        border: solid 1px #000;
        padding: 10px;
        cursor: pointer;
    }
    
    #myCalendar ul p span {
        display: block;
        margin-bottom: 3px;
    }
    
    #myCalendar ul p span:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
    }
    
    #myCalendar .myFestival {
        width: 218px;
        padding: 5px;
        border: solid 1px #fff;
        background-color: #F1F1F1;
        color: #666666;
    }
    
    #myCalendar .myFestival li p:nth-child(1) {
        font: bold 14px/20px "微软雅黑";
        margin-bottom: 5px;
    }
    
    #myCalendar .myFestival span {
        margin-right: 5px;
    }
    
    #myCalendar .myDate li.current:hover {
        background-color: #fff;
        color: #FF6699;
    }
    *common.css
    * {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。

 */

/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/* structural elements 结构元素 */
dl,dt,dd,ul,ol,li,/* list elements 列表元素 */
pre,/* text formatting elements 文本格式元素 */
form,fieldset,legend,button,input,textarea,/* form elements 表单元素 */
th,td/* table elements 表格元素 */,
span,img,a{
margin:0;
padding:0;
}

/** 设置默认字体 **/
body,button,input,select,textarea/* for ie */{
font-family:微软雅黑; font-size:12px; background-color: white;
}
h1,h2,h3,h4,h5,h6{ font-size:100%; }
address,cite,dfn,em,var{font-style:normal; } 

/* 将斜体扶正 */
code,kbd,pre,samp{font-family:couriernew,courier,monospace; } 

/* 统一等宽字体 */
small{font-size:12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul,ol{list-style:none; }

/** 重置文本格式元素 **/
a{text-decoration:none; }
/*a:hover {color: ;}*/
a:hover{text-decoration:none; }

/*3px问题*/
img{vertical-align:middle;}

/** 重置表单元素 **/
legend{color:#000; } 

/* for ie6 */
fieldset,img{border:0; } 

/* img 搭车：让链接里的 img 无边框 */
/* 使得表单元素在 ie 下能继承字体大小 */
button,input,select,textarea{font-size:100%; } 

/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table{border-collapse:collapse; border-spacing:0; }
.clear{clear: both;}


/*清除浮动*/

/*浮动一*/
.clear{clear: both;}

/*浮动二*/
.clear_by_overflow{
    overflow: hidden;
}

/*浮动三*/
.clear_by_after{
    content: "";
    height: 0;
    display: block;
    clear: both;
}

.left_float{
    float: left;
}

.right_float{
    float: right;
}

/*浮动四*/
.children_left_float:after{
    content:"";
    clear: both;
    display: block;
    height: 0;
}
.children_left_float>p,
.children_left_float>ul,
.children_left_float>li,
.children_left_float>dl,
.children_left_float>dt,
.children_left_float>dd,
.children_left_float>span,
.children_left_float>p,
.children_left_float>img,
.children_left_float>video,
.children_left_float>h3,
.children_left_float>a{
    float: left;
}
    *.js：
    function showMyCalendar() {
        var arr = [
            "元旦节：1月1日到3日放假3天",
            "春节：2月2日到8日放假7天",
            "妇女节：3月8日妇女节",
            "清明节：4月3日到5日放假3天",
            "劳动节：4月30日到5月2日放假3天",
            "端午节：6月4日到6日放假3天",
            "小暑：7月7日小暑。不放假",
            "七夕节：8月6日七夕节。不放假",
            "中秋节：9月10日到12日放假3天",
            "国庆节：10月1日到7日放假7天",
            "立冬：11月8日立冬。不放假",
            "艾滋病日：12月2日<br />废除奴隶制国际日：12月2日"
        ];
        var dateChnArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        var dateEnArr = ["JAN", "FER", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
        
        var myCalendar = document.getElementById("myCalendar");
        var myUl = myCalendar.getElementsByTagName("ul");
        var myDateLi = myUl[0].getElementsByTagName("li");
        var myFesLi = myUl[1].getElementsByTagName("li");
        var myFesp = myFesLi[0].getElementsByTagName("p");
        var myFesSpan = myFesp[0].getElementsByTagName("span");
        var str = "";
        var roundNum = Math.floor(Math.random() * 11);
    
        //动态生成li加入
        for(var i = 0; i < 12; i++) {
            str += "<li><p><span>" + dateChnArr[i] + "</span><span>" + dateEnArr[i] + "</span></p></li>";
        }
        myUl[0].innerHTML = str;
    
        //刷新时随机一个li，添加current类
        //myDateLi[roundNum].style.background = "red";   //随机数，添加样式可以
        addClass(myDateLi[0], "current");                //随机数，添加类不可以？？？？？？？
        myFesSpan[0].innerHTML = roundNum + 1;
        myFesp[1].innerHTML = arr[roundNum];
    
        //鼠标事件，变化内容
        for(var i = 0; i < myDateLi.length; i++) {
            myDateLi[i].index = i;
            addEvent(myDateLi[i], "mouseover", function() {
                myFesSpan[0].innerHTML = this.index + 1;
                myFesp[1].innerHTML = arr[this.index];
                for(var i in arr) {
                    if(i * 1 == i) {
                        removeClass(myDateLi[i], "current");
                    }
                }
                addClass(this, "current");
            });
    
        }
    }
*common.js
//事件函数
function addEvent(obj, type, fn) {
    if(obj.addEventListener) {
        return obj.addEventListener(type, fn);
    } else if(obj.attachEvent) {
        return obj.attachEvent("on" + type, fn);
    }
}

/*
 添加、删除类
 * */
//判断类是否存在
function hasClass(element, className) {
    return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

//添加类
function addClass(element, className) {
    if(!hasClass(element, className)) {
        element.className += " " + className;
    }
}

//删除类
function removeClass(element, className) {
    if(hasClass(element, className)) {
        element.className = element.className.replace(
            new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
    }
}


//返回属性
function changeEleStyle(ele,attr,value){
    ele.style[attr]=value;
}

Answer 1

//添加类
function addClass(element, className) {
    if(!hasClass(element, className)) {
        element.className += " " + className;//这个空格去掉
    }
}

//删除类
function removeClass(element, className) {
    if(hasClass(element, className)) {
        element.className = element.className.replace(
            new RegExp('(\\s|^)' + className + '(\\s|$)'), ' '//这里空格);
    }
}

//添加类
function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += className;
    }
}

//删除类
function removeClass(element, className) {
    if (hasClass(element, className)) {
        element.className = element.className.replace(
            new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
    }
}

事实上你这几个函数都不健壮。找了两个比较全面的给你：

function addClass(obj, cls) {
    var obj_class = obj.className, //获取 class 内容.
        blank = (obj_class != '') ? ' ' : ''; //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
    added = obj_class + blank + cls; //组合原来的 class 和需要添加的 class.
    obj.className = added; //替换原来的 class.
}

function removeClass(obj, cls) {
    var obj_class = ' ' + obj.className + ' '; //获取 class 内容, 并在首尾各加一个空格. ex) 'abc        bcd' -> ' abc        bcd '
    obj_class = obj_class.replace(/(\s+)/gi, ' '), //将多余的空字符替换成一个空格. ex) ' abc        bcd ' -> ' abc bcd '
        removed = obj_class.replace(' ' + cls + ' ', ' '); //在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
    removed = removed.replace(/(^\s+)|(\s+$)/g, ''); //去掉首尾空格. ex) 'bcd ' -> 'bcd'
    obj.className = removed; //替换原来的 class.
}

function hasClass(obj, cls) {
    var obj_class = obj.className, //获取 class 内容.
        obj_class_lst = obj_class.split(/\s+/); //通过split空字符将cls转换成数组.
    x = 0;
    for (x in obj_class_lst) {
        if (obj_class_lst[x] == cls) { //循环数组, 判断是否包含cls
            return true;
        }
    }
    return false;
}