涉及两个函数的 if-else 语句

Question

当谈到 jQuery 时，我仍然是个菜鸟，我真的很想弄清楚这一点，我希望有 Javascript 经验的人可以为我指明正确的方向。

我有一个悬停函数，涉及一个 div 隐藏/显示事件，该事件由悬停 li 类触发，该类涉及一个带有动画的单独的 mouseenter/mouseleave 函数。

example

jQuery：

//Right display div swap on hover 
    $('.home, .about, .contact, .services').hover(function(){
        $('#display_'+$(this).attr('class')+':hidden').fadeIn(400); 
    }, function() {
        $('#display_'+$(this).attr('class')).hide()
    });  

//Slide left li classes on mouseenter   
    var sections = ['home','about','contact','services'];
        $.each(sections, function(i,val) {
             var main = $('.' + val);
             var icon = $('#icon_' + val);
         main.mouseenter(function(){ 
                main.stop().animate({left:'115px'}, 600)
                icon.filter(':hidden').fadeIn(600);

        }).mouseleave(function(){
                main.stop().animate({left:'65'}, 600)
                icon.hide();    
    });
    });

//Hidden icons 
    $('#icon_home').hide();
    $('#icon_about').hide();
    $('#icon_contact').hide();
    $('#icon_services').hide(); 
});

我正在尝试在//Slide left li classes on mouesenter 在这些条件下触发 mouseleave 动画：

• 如果：当悬停功能被触发时 悬停在任何其他 3 li 课程
• else: 与 mouseenter 相同的事件 功能

因此，如果$('.home') 悬停，它将向左滑动，并且右侧的相应 div 将显示并保持显示，并且无论鼠标的意图如何，都以 li 类动画左侧显示，但是，如果在 $('.home') 悬停之后，相应的 div出现时，用户悬停在上面说 $('.about') ，&('.home') 将滑回它的默认 CSS 位置，同时隐藏它的相应 div 并同时触发 $('.about') 动画以及显示 $('.about') li 类的相应 div 等等。这应该是连续的（如循环）。

有什么想法吗？

html:

<div id="right_nav">
    <div id='display_home'><img src="images/gallery/home.png" width="605" height="300" /></div>
    <div id='display_about'><img src="images/gallery/about us.png" width="605" height="300" /></div>
    <div id='display_contact'><img src="images/gallery/Contact Us.png" width="605" height="300" /></div>
    <div id='display_services'><img src="images/gallery/Services.png" width="605" height="300" /></div> 
  </div>

  <div id="left_nav">
    <div id="divider_home"><img src="divider.png" width="190" height="2" /></div>
    <div id="divider_about"><img src="divider.png" width="190" height="2" /></div>
    <div id="divider_contact"><img src="divider.png" width="190" height="2" /></div>
    <div id="divider_services"><img src="divider.png" width="190" height="2" /></div>
    <div id="icon_home"><img src="Icons/home.png" width="60" height="60" /></div>
    <div id="icon_about"><img src="Icons/about.png" width="60" height="60" /></div>
    <div id="icon_contact"><img src="Icons/contact.png" width="60" height="60" /></div>
    <div id="icon_services"><img src="Icons/services.png" width="60" height="60" /></div> 

    <div id="thumb">
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
        <li class="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
      </ul>
    </div>   

建议将不胜感激！

谢谢

Answer 1

应该这样做：

var all_displays = $('#right_nav > [id^="display_"]');
var all_sections = $('#thumb > ul > li');
var all_icons = $('#left_nav > [id^="icon_"]');

var sections_array = ['home', 'about', 'contact', 'services'];

$.each(sections_array, function(i, sec) {
    var display = all_displays.filter('#display_' + sec);
    var section = all_sections.filter('.' + sec);
    var icon = all_icons.filter('#icon_' + sec);

    section.mouseenter(function() {
        if( icon.is(':hidden') ) {

            display.fadeIn(400);
            section.stop().animate({ left: '115px' }, 600);
            icon.fadeIn(600);

            all_displays.not( display ).hide();
            all_sections.not( section ).stop().animate({ left: '65' }, 600);
            all_icons.not( icon ).hide();

        }

    });
});


all_icons.hide();

现在我了解了应用程序是什么，我更改了一些变量名称，并缓存了每组显示、部分（lis）和相关图标。 p>

然后在$.each()中我缓存了一个变量display、section和icon与sections_array中的当前项相关，并为当前section分配了一个处理程序。该处理程序将持续引用这 3 个相关元素。

之后，只需仅分配mouseenter 处理程序，它会做两件事：

• 显示它所引用的 display、section 和 icon 元素的集合，

• 通过从我们之前使用 not()^[docs] 方法缓存的整个集合中排除 display、section 和 icon 元素来隐藏所有其他元素。