jquery添加类到div，添加另一个类到所有其他

Question

我有一个divs，当我悬停我想添加一个类到hovered div，但同时我想添加另一个类到所有的div未徘徊，这里是我的代码：

我知道这是一个简单的解决，我俯瞰某个（或真的累了笑）

HTML：

<div class="event"></div> 
<div class="event"></div> 
<div class="event"></div> 
<div class="event"></div> 
<div class="event"></div> 
<div class="event"></div> 
<div class="event"></div> 

的jQuery：

<script type="text/javascript"> 
$(document).ready(function() { 
$(".event").hover(
function() { 
    $(this).addClass("hovered"); 
}, function() { 
    $(this).removeClass("hovered"); 
} 
); 
}); 
</script> 

Answer 1

我想添加一个类悬停格，但在同一时间，我想 另一个类添加到不徘徊

保留的元素在变量中的所有div，这样你可以只针对一切而不是this

var elems = $(".event"); 

elems.hover(
    function() { 
     $(this).addClass("hovered"); 
     elems.not(this).addClass('something_else') 
    }, function() { 
     $(this).removeClass("hovered"); 
     elems.not(this).removeClass('something_else') 
    } 
); 

Answer 2

这里试试这个：

$('div').hover(function() { // on a hover on a div 
    $('div').attr('class', 'event'); // remove the class; keep the first one 
    $(this).attr('class', 'hovered event'); // update the class for the current 
} 

这使用jQuery API中的attr来更新和替换属性值。希望它可以帮助你。

试试这个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/SVRcw/

Answer 3

你必须使用.not()排除从整体元素集合当前元素。

尝试，

<script type="text/javascript"> 
$(document).ready(function() { 

var xElements = $(".event"); 

$(".event").hover(
function() { 
    xElements.not($(this)).addClass('anotherClass'); 
    $(this).addClass("hovered"); 
}, function() { 
    xElements.removeClass("hovered"); 
    $(".event").not($(this)).removeClass('anotherClass'); 
} 
); 
}); 
</script> 

Answer 4

使用not() 试试这个

$(document).ready(function() { 
    var $event=$('.event'); 
    $event.hover(function() { 
     $(this).addClass("hovered"); 
     $event.not(this).addClass("newClass"); 
    }, function() { 
     $event.not(this).removeClass("newClass"); 
    }); 
});