Question

我有一个脚本，如果你将鼠标悬停在certin元素上，会显示一个唯一的DIV，而其他人则隐藏......非常简单......

在页面加载时，我将div称为“intro”，显示为div ....

我想要完成的是，如果其他5个元素没有被盘旋，它会显示介绍div ......

所以，基本上是外行的话：

显示介绍div 如果鼠标悬停在这个div类上，则显示此div ID，如果没有显示intro div。

这是我到目前为止所使用的：

$(document).ready(function() {

$('.intro').show();

$('li.members, li.members-active').hover(function() {
    $('.members-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });



$('li.brokers, li.brokers-active').hover(function() {
    $('.brokers-show').show();
    $('.members-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.providers, li.providers-active').hover(function() {
    $('.providers-show').show();
    $('.brokers-show').hide();
    $('.members-show').hide();
    $('.employers-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.employers, li.employers-active').hover(function() {
    $('.employers-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.members-show').hide();
    $('.seniors-show').hide();
    $('.all').hide();
    return false;
  });

$('li.seniors, li.seniors-active').hover(function() {
    $('.seniors-show').show();
    $('.brokers-show').hide();
    $('.providers-show').hide();
    $('.employers-show').hide();
    $('.members-show').hide();
    $('.all').hide();
    return false;
  });

});

Answer 1

您可以大大简化这一点：

$(document).ready(function() {

    $('.intro').show();    // Show the intro by default
                           // Ideally, you'd skip this step and just make sure
                           // the intro was visible on load anyway

    $('li').hover(function() {   // Bind an event handler to every item you want to toggle            
        var associatedDivClass = $(this).attr('class').replace('-active', '-show');
        $('.' + associatedDivClass).show();
        $('.intro').hide();
    });
    $('li').mouseout(function() {
        var associatedDivClass = $(this).attr('class').replace('-active', '-show');
        $('.' + associatedDivClass ).hide();
        $('.intro').show();
    });

});

根据需要限制“li”选择器，以便只定位要切换的项目。

jQuery - 如果没有调用任何元素？

1 个答案: