js + jquery 循环遍历ul中li的点击事件并添加类名

第一种：

<div class="g-contation">
    <ul>
    	// active1 添加默认效果
        <li class="m-list-hd active1" id="recommend1">水果</li>
        <li class="m-list-hd" id="recommend2">零食</li>
        <li class="m-list-hd" id="recommend3">泡面</li>
    </ul>
    <ul>
        <li class="m-list-bd active2" id="num1">香蕉</li>
        <li class="m-list-bd" id="num2">辣条</li>
        <li class="m-list-bd" id="num3">酸菜牛肉</li>
    </ul>
</div>
<style type="text/css">
    li {
        display: inline-block;
        padding: 20px;
        border: 1px solid #ddd;
        list-style: none;
    }
    .m-list-hd.active1 {
        color: #f00;
    }
    .m-list-bd.active2 {
        color: #fff;
        background: #f00;
    }
</style>

分析：

1、hasClass() 方法用来判断被选元素是否包含指定的 class，如果有，则返回true，否则返回false；

2、hasClass() 方法是为了增强代码的可读性而产生的，在jQuery内部实际上是调用了is()方法来实现这个功能，等价于 $('p').is('active1')；

$(document).ready(function() {
    // 第一步，拿到所有id
    var $name1 = $('#recommend1'),
        $name2 = $('#recommend2'),
        $name3 = $('#recommend3'),
        $number1 = $('#num1'),
        $number2 = $('#num2'),
        $number3 = $('#num3');
    var listTop = new Array($name1,$name2,$name3);
    var listBod = new Array($number1,$number2,$number3);
    
    // 第二步，添加点击事件
    $name1.click(function(){
        setSelectedTime($name1,$number1);
    });
    $name2.click(function(){
        setSelectedTime($name2,$number2);
    });
    $name3.click(function(){
        setSelectedTime($name3,$number3);
    });
    
    // 第三步，绑定事件函数
    function setSelectedTime(selectedTime,num) {
        if(selectedTime.hasClass('active1')){

        } else {
            for (var i = 0; i < listTop.length; i++) {
                var time = listTop[i];
                if(time.hasClass('active1')) {
                    time.removeClass('active1');
                }
            }
            for (var i = 0; i < listBod.length; i++) {
                var top = listBod[i];
                if(top.hasClass('active2')) {
                    top.removeClass('active2');
                }
            }
            // 选中状态
            selectedTime.addClass('active1');
            num.addClass('active2');
        }
    }
})

效果图：

---

第二种：

1、hasClass() 方法检查被选元素是否包含指定的 class；

2、event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称；

ie 下的event.srcElement从字面上可以看出来有以下关键字：事件.源（它的意思就是：当前事件的源）；

3、tar.nodeName.toLowerCase - 节点名称，小写；

4、siblings() 其作用是筛选给定的同胞同类元素（不包括给定元素本身）；

$(".test").bind("click",function(e){
    e = e || window.event; // e对象存在时回返e,当window.event存在时返回event
    var tar = e.srcElement || e.target; // 兼容两者
    // if判断
    if(tar.nodeName.toLowerCase() == "li" && !$(tar).hasClass('two')){
        $(tar).addClass("two");
        $(tar).siblings().removeClass("two");
    }else{
        $(tar).removeClass("two");  // 否则删除自身的two类
    }
})

<div class="test">
    <ul>
        <li class="one">香蕉</li>
        <li class="one">苹果</li>
        <li class="one">菠萝</li>
        <li class="one">猕猴桃</li>
        <li class="one">芒果</li>
    </ul>
</div>