0

我有以下 jQuery ...

$('.class1').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

$('.class2').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

$('.class3').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

每个事件都做同样的事情（它们都隐藏了 div1、div2 和 div3），但是有一个不同的类触发它，我想知道是否有一种方法可以将它们组合成一个。这样当用鼠标输入 class1、class2 或 class3 时，div 1、2 和 3 被设置为 display:none;。像...

$('.class1' OR '.class2' OR '.class3).mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

我知道我可以做到这一点...

$('.class1').addClass("class4");
$('.class2').addClass("class4");
$('.class3').addClass("class4");
$('.class4').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

但是我想知道我上面提到的方式是否可行，如果可以，该怎么做？

4

2 回答 2

3 
$('.class1, .class2, .class3').on('mouseenter', function() {
    $('#div1, #div2, #div3').hide();
});

或仅隐藏与选择器中的数字不匹配的那些：

$('.class1, .class2, .class3').on('mouseenter', function() {
    var this_class = this.className.replace('class',''); // works for one class only

    $('#div1, #div2, #div3').filter(function() {
        return this.id.indexOf(this_class) == -1;
    }).hide();
});
于 2013-04-09T18:23:59.027 回答
1

您可以在 jquery 中处理多个元素，方法是让多个元素的类或 id 用逗号 (",") 分隔

$('.class1').mouseenter(function() {
    $('#div1, #div2, #div3').css('display', 'none');
});

$('.class2').mouseenter(function() {
    $('#div1, #div2, #div3').css('display', 'none');
});

$('.class3').mouseenter(function() {
   $('#div1, #div2, #div3').css('display', 'none');
});

或者更多更好的方法..

$('.class1, .class2, .class3').mouseenter(function() {
     $('#div1, #div2, #div3').css('display', 'none');
});
于 2013-04-09T18:27:28.987 回答