上的窗口大小调整执行功能时窗口大于480个像素

Question

>>JSFIDDLE < <

我觉得冠军是自我解释。我不知道为什么这个代码不工作：

function toolTip() { 
    var list = $("#readMoreUl"); 
    var links = list.children("li").children("a"); 
    var tooltips = links.children("span.tooltip"); 

    links.hover(function() { 
     $(this).children("span.tooltip").fadeIn(350); 
     }, 
    function() { 
     $(this).children("span.tooltip").fadeOut(40); 
     });  
} 

$(document).ready(function() { 
    $(window).resize(function() { 
     if ($(window).width() > 480) { 
      toolTip(); 
     } 
    }).resize(); 
}); 

我也想知道：是我使用的最后.resize通话是否正确？模拟一个实际的调整大小，所以函数被调用window ready？

Answer 1

其中之一是，当窗口大于480时，您的代码将安装工具提示处理程序，并且每次检测到它时，都会再次安装（导致多个事件处理程序）。而且，如果窗口的大小小于480，它不会删除工具提示事件处理程序。

我建议做这种方式是简单得多：

function toolTip() { 
    var list = $("#readMoreUl"); 
    var links = list.children("li").children("a"); 
    var tooltips = links.children("span.tooltip"); 
    var overlay = $("#overlay"); 

    links.hover(function() { 
     if ($(window).width() > 480) { 
      $(this).addClass("highlight"); 
      $(this).children("span.tooltip").fadeIn(350); 
      overlay.fadeIn(400); 
     } 
    }, 
    function() { 
     $(this).children("span.tooltip").fadeOut(40); 
     overlay.fadeOut(30); 
     $(this).removeClass("highlight"); 
    });  
} 

$(document).ready(function() { 
    toolTip(); 
}); 

你可以看到它在这里工作：http://jsfiddle.net/jfriend00/yVCwS/