Question

我有以下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时，div1,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');
});

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

Answer 1

$('.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();
});

Answer 2

你可以通过让多个元素的类或id由COMMA（“，”）分隔来在jquery中处理多个元素

$('.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');
});

将多个jQuery事件合并为一个

2 个答案: