2

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

3 回答 3

1

尝试 ：

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

使用以选择器开头的选择器id选择所有以开头的DOM元素ea_并使用addClass和removeClass切换类属性

这里的工作示例

于 2012-04-26T12:54:47.400 回答
0

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

$(function() {   
    $('div[id^="ea_"]').hover( function(){    
        $(this).attr('class','myClassHover'); 
    },  
    function(){       
        $(this).attr('class','myClass'); 
    }); 
});
于 2012-04-26T13:01:50.630 回答
0

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

于 2012-04-26T13:32:55.037 回答