JQuery添加了一个类

时间:2013-09-11 06:40:47

标签: javascript jquery

我想在点击<li>元素时添加一个类。但它不起作用。这是JQuery片段

$(".mama").click(function(){        
    var arr = ["cat","dog", "mice", "bird"];
    alink =  $(this).text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $(this).addClass('hi'); 
        }
    }); 
});

和HTML

<ul id="animal">
    <li class="mama"><a href="#">cat</a></li>
    <li class="mama"><a href="#">dog</a></li>
    <li class="mama"><a href="#">Mice</a></li>
</ul>

我也尝试过.map,但没有任何事情发生。请给出解决方案并解释一下。感谢

6 个答案:

答案 0 :(得分:2)

这应该有效:

$(".mama").click(function(){   
    var $this = $(this);     
    var arr = ["cat","dog", "mice", "bird"];
    alink =  $(this).text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $this.addClass('hi'); 
        }
    }); 
});

因为this中的each 不是 DOM元素<li>

答案 1 :(得分:1)

你可能只需要这样做:

http://jsfiddle.net/reugB/1/

$('.mama').on('click', function(evt) {
    evt.preventDefault();
    $(this).addClass('hi');
});

答案 2 :(得分:0)

如果您的意思是将hi课程添加到点击的li,请执行以下操作:

$(".mama").click(function(e){
    e.preventDefault();
    $(".mama").removeClass('hi');
    $(this).addClass('hi')        
});

答案 3 :(得分:0)

使用 this 来引用已点击的当前元素。

$(".mama").click(function (e) {
    e.preventDefault();
    $(this).addClass('hi');
});

答案 4 :(得分:0)

 .hi { background-color: #f00 !important;}


 $('.mama').on('click', function(evt) {
evt.preventDefault();
$(this).addClass('hi');

});

答案 5 :(得分:-1)

$(".mama").click(function(e){    
e.preventDefault();    
    var arr = ["cat","dog", "mice", "bird"];
    var alink =  $(this).find("a").text();        

    $.each(arr, function(index, value) {
        if(alink == value){
            $(this).addClass('hi'); 
        }
    }); 
});

参见参考textfind