鼠標懸停時更改多個div的分類

我有一個腳本，如下所示。我有多個div，當光標在div上時，我按如下方式更改該div的類名稱。但我不知道這樣的div的數量。我怎樣才能根據這個升級代碼？謝謝。鼠標懸停時更改多個div的分類

$(function() { 
    $('#ea_0').hover(function(){  
    $('#ea_0').attr('class','myClassHover'); 
    }, 

    function(){  
     $('#ea_0').attr('class','myClass'); 
    }); 
}); 

<div id="ea_0" class="myClass" ></div> 
<div id="ea_1" class="myClass" ></div> 
<div id="ea_2" class="myClass" ></div> 
...

來源

2012-04-26 user1077300

嘗試：

$(function() { 
    $('div[id^="ea_"]').hover(function() { 
     $(this).addClass('myClassHover'); 
     $(this).removeClass('myClass'); 
    }, function() { 
     $(this).addClass('myClass'); 
     $(this).removeClass('myClassHover'); 
    }); 
});

採用starts with selector選擇具有id開始ea_所有的DOM元素，並使用addClass和removeClass切換類屬性

Working example here

來源

2012-04-26 12:54:47 ManseUK

+1爲是（多）更快，但奇怪的是你的答案並沒有顯示在所有我貼我的後直到。 – 2012-04-26 13:04:18

@AnthonyGrist我在10分鐘前創建了它 - 然後刪除它導致它沒有工作，得到它的工作（我使用'toggleClass'），然後再次編輯它！ – ManseUK 2012-04-26 13:05:06

添加對那些來說是獨一無二的如果可能，元素將是更好的選擇。如果不是，那麼您可以使用ID的「屬性開始」選擇器來選擇ID爲「ea_」開頭的所有<div>元素。然後使用this來引用在回調函數內觸發事件的<div>。

$(function() { 
    $('div[id^="ea_"]').hover(function(){  
     $(this).attr('class','myClassHover'); 
    }, 
    function(){  
     $(this).attr('class','myClass'); 
    }); 
});

來源

2012-04-26 13:01:50

試試這個優雅的解決方案：你只需要包裹所有的div內的另一個DIV和替代結合懸停事件，他們中的每一個，你只需要鼠標懸停和mouseout事件到容器綁定DIV爲了加快東西。

$('div:first').mouseover(function(event) { 
    $(event.target).closest('div').addClass('myClassHover'); 
}); 
$('div:first').mouseout(function(event) { 
    $(event.target).closest('div').removeClass('myClassHover'); 
});

演示：http://jsfiddle.net/8vD56/

來源

2012-04-26 13:32:55 codef0rmer

鼠標懸停時更改多個div的分類

回答

相關問題