Question

我有一个如下脚本。我有一些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>
...

Answer 1

尝试：

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

使用starts with selector选择所有DOM元素id从ea_开始，并使用addClass和removeClass来切换类属性

Working example here

Answer 2

如果可能的话，添加对这些<div>元素唯一的类将是更好的选择。如果没有，那么您可以使用ID的“属性开头”选择器来选择ID为“ea_”的所有<div>元素。然后使用this来引用在回调函数中触发事件的<div>。

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

Answer 3

尝试这个优雅的解决方案：你只需将所有div包装在另一个div中，而不是将hover事件绑定到它们中的每一个，你只需将mouseover和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/

鼠标悬停时更改多个div的类

3 个答案: