jQuery-如果/使用迭代的else语句仅能删除一次/之后一次/之后，则再次启动，则无法正常工作

Question

https://jsfiddle.net/9harsfb6/

在jsfiddle文件中，当您悬停在菜单项上时，我提供的红色下划线出现了...然后，当您悬停并尝试再次悬停在红线上时。每次悬停在给定项目下2。仅在第一个悬停。

CSS：

        <ul id="menu">
                    <li class="slider1"><a id="omnie" href="">o mnie</a></li>
                    <li class="slider2"><a id="oferta" href="">oferta</a></li>
                    <li class="slider3"><a id="etyczny" href="">kod etyczny</a></li>
                    <li class="slider4"><a id="referencje" href="">referencje</a></li>
                    <li class="slider5"><a id="kontakt" href="">kontakt</a></li>
                </ul>

jQuery：

$(document).ready(function() {
    $('ul').on('mouseenter', function() {
            $('body').prepend( '<div id="object1"></div>' );
        });
    $('ul#menu').mouseleave(function () {
        $('div#object1').fadeOut(300, function() { $(this).remove(); }) ;
        });
 });


$(document).ready(function(e) { 
            var i=1;
                $('ul#menu li.slider1').on({ 
                            mouseenter: function(e) {   
                            if(i<2) {
                            $('div#object1').css('position', 'absolute');                       
                            $('div#object1').css('width', '100px');
                            $('div#object1').css('height', '5px');                                  
                            $('div#object1').css('right', 620); //or wherever you want it
                            $('div#object1').css('top', 75);
                            $('div#object1').fadeIn(1000);                              
                            i++;}  else {
                                    $('div#object1').css('position', 'absolute');
                                    $('div#object1').css('width', '100px');
                                    $('div#object1').css('height', '5px');                              
                                    $('div#object1').stop().animate( {right:620, top:75, opacity:1}, 700);
                    }
                }       
    });
                $('ul#menu li.slider2').on({ 
                            mouseenter: function(e) {   
                            if(i<2) {
                            $('div#object1').css('position', 'absolute');                               
                            $('div#object1').css('width', '100px');
                            $('div#object1').css('height', '5px');                                  
                            $('div#object1').css('right', 480); //or wherever you want it
                            $('div#object1').css('top', 75);
                            $('div#object1').fadeIn(1000);                              
                            i++;}  else {
                                    $('div#object1').css('position', 'absolute');
                                    $('div#object1').css('width', '100px');
                                    $('div#object1').css('height', '5px');                              
                                    $('div#object1').stop().animate( {right:490, top:75, opacity:1}, 700);

                    }
                }       
    });     
}); 

Answer 1

您的 i变量永远不会重置，因此您对if (i <2)块中的DIV进行的初始化在删除DIV并重新置换后永远不会重新运行。

对当前代码的最小更改要修复，这将是将两个文档准备好处理程序组合起来（无论如何您都应该这样做），以便所有功能都可以访问相同的i变量，然后在UL元素的mouseleave中访问处理程序重置i到1。演示：https：//jsfiddle.net/9harsfb6/3/（请注意，在我单击"整理"按钮之后，代码更容易阅读？）

您的代码可能会大大简化：似乎您正在将DIV上的相同属性设置为几个位置的相同值。您可以将所有这些移出JS并进入CSS。您可以在页面html中包含DIV，而不是附加和删除它。您可以通过让UL Element的MouseOut事件处理程序触发.slider1元素的Mouseenter来隐藏它。类似的东西：https：//jsfiddle.net/9harsfb6/5/

// JS that works with the div in the page html and all the
// positioning and size nonsense in the CSS:
$(document).ready(function() {
  $('ul#menu').mouseleave(function() {
    $('ul#menu li.slider1').trigger('mouseenter');
  });
  $('ul#menu li.slider1').on({
    mouseenter: function(e) {
      $('div#object1').stop().animate({
        right: 620,
        opacity: 1
      }, 700);
    }
  });
  $('ul#menu li.slider2').on({
    mouseenter: function(e) {
      $('div#object1').show().stop().animate({
        right: 490,
        opacity: 1
      }, 700);
    }
  });
});

Answer 2

使用类似的计数器来确定您的功能需要做什么通常不是一个好主意。一个简单的解决方案是用布尔来替换计数器，在您的功能检查并相应地设置其值，并合并您的两个文档。dready功能，类似的功能：

$(document).ready(function () {
    var hidden = true;
    $('ul').on('mouseenter', function () {
        $('body').prepend('<div id="object1"></div>');
    });
    $('ul#menu').mouseleave(function () {
        $('div#object1').fadeOut(300, function () {
            $(this).remove();
            hidden = true;
        });
    });
    $('ul#menu li.slider1').on({
        mouseenter: function (e) {
            if (hidden) {
                ...
                hidden = false;
            } else {
            }
        }
    });

另外，您无需每次徘徊时都要删除和预处/附加DIV。