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"); 
    }); 
});