压缩jquerymouseover和mouseOut

想象一下，对于菜单导航的四个不同部分，我将这个HTML片段重复了4次

<ul class="navigation">
  <li class="nav-Mens"><a href="#">Mens</a></li>
  <li class="nav-Womens"><a href="#">Womens</a></li>
  <li class="nav-Kids"><a href="#">Kids</a></li>
  <li class="nav-Gear"><a href="#">Gear</a></li>
</ul>
   <div id="Gear">
  <ul class="Gear">
    <table width="300" border="0" cellspacing="5" cellpadding="0">
      <tbody><div style="background-color:#333; color:#000">SHOP GEAR</div>
      <tr>
        <td><a href="#"><b>Snow</b></a>
        <p></p>
          <li><a href="#">Bags</a></li></td>
        <td><a href="#"><b>Surf</b></a>
        <p></p>
          <li><a href="#">Towels</a></li></td>
      </tr>
    </tbody></table>
  </ul>
</div>

---

您知道如何使jquery稍微小一点吗？

如果您担心带宽：

• Gzip it

如果您担心执行时间：

• 对其进行分析，并认识到它没有什么不同

---

如果您的一些绑定调用相同的闭包，那么它们可以组合在一起

从

到

及

---

))

这就是我想到的 对于javascript：

<script type="text/javascript">
// JavaScript Document  
$(document).ready(function() {
var timeout;
$("ul.navigation li").mouseover(function(){
        var $showDiv = $(this).attr("class").substr(4);
         $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).show();
            }
            else
            {
            $(this).hide();
            }

   });
});
$("ul.navigation li").mouseout(function(){
var $showDiv = "#" +  $(this).attr("class").substr(4);
  $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).hide();
            }

       });
});

$("#categories > div").mouseover(function(){
 clearTimeout(timeout);
});

$("#categories > div").mouseout(function(){
$currentDiv = $(this).attr("id");
switch($currentDiv){
 case "Mens": timeout = setTimeout('hideMens()', 1000); break;
 case "Gear": timeout = setTimeout('hideGear()', 1000); break;
 case "Kids" : timeout = setTimeout('hideMens()', 1000);break;
 case "Womens" : timeout = setTimeout('hideWomens()', 1000);break;
}
});

});

//Calling all the functions to hide everything
function hideMens() {
    $('#Mens').hide();
}
function hideWomens() {
    $('#Womens').hide();
}
function hideKids() {
    $('#Kids').hide();
}
function hideGear() {
    $('#Gear').hide();
}

</script>

//JavaScript文档
$（文档）.ready（函数（）{
var超时；
$（“ul.navigation li”）.mouseover（函数（）{
var$showDiv=$（this.attr（“class”）.substr（4）；
$（“#类别>div”）。每个（函数（）{
if（$（this.attr（“id”）==$showDiv）{
$（this.show（）；
}
其他的
{
$（this.hide（）；
}
});
});
$（“ul.navigation li”）.mouseout（函数（）{
var$showDiv=“#”+$（this.attr（“class”）.substr（4）；
$（“#类别>div”）。每个（函数（）{
if（$（this.attr（“id”）==$showDiv）{
$（this.hide（）；
}
});
});
$（“#categories>div”）.mouseover（函数（）{
clearTimeout（超时）；
});
$（“#categories>div”）.mouseout（函数（）{
$currentDiv=$（this.attr（“id”）；
交换机（$currentDiv）{
案例“Mens”：timeout=setTimeout（'hideMens（）'，1000）；中断；
案例“齿轮”：超时=设置超时（'hideGear（）'，1000）；中断；
案例“Kids”：timeout=setTimeout（'hideMens（）'，1000）；break；
案例“Womens”：timeout=setTimeout（'hideWomens（）'，1000）；break；
}
});
});
//调用所有函数以隐藏所有内容
函数hideMens（）{
$（'男人'）.hide（）；
}
函数hideWomens（）{
$（“#女性”）.hide（）；
}
函数hideKids（）{
$（“#孩子们”）.hide（）；
}
函数hideGear（）{
$（“#齿轮”）.hide（）；
}

---

对于html，我将div包装在另一个id为“categories”的div中。

此外，jQuery还有一个绑定事件（“bind”）的函数，这通常是最好的方法：

$('li.nav-Mens, #Mens').bind("mouseout", function() {
    timeout = setTimeout('hideMens()', 1000);
});

---

您可以在这里阅读-

关于可维护性的内容如何？这并不总是与性能有关。仅供参考，您可以使用

setTimeout（hideMens，1000）

并避免那种难看的字符串方法语法

$('li.nav-Mens, #Mens').mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});

$('#Mens, #Womens, #Kids, #Gear').mouseover(function() {
    clearTimeout(timeout);
}

<script type="text/javascript">
// JavaScript Document  
$(document).ready(function() {
var timeout;
$("ul.navigation li").mouseover(function(){
        var $showDiv = $(this).attr("class").substr(4);
         $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).show();
            }
            else
            {
            $(this).hide();
            }

   });
});
$("ul.navigation li").mouseout(function(){
var $showDiv = "#" +  $(this).attr("class").substr(4);
  $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).hide();
            }

       });
});

$("#categories > div").mouseover(function(){
 clearTimeout(timeout);
});

$("#categories > div").mouseout(function(){
$currentDiv = $(this).attr("id");
switch($currentDiv){
 case "Mens": timeout = setTimeout('hideMens()', 1000); break;
 case "Gear": timeout = setTimeout('hideGear()', 1000); break;
 case "Kids" : timeout = setTimeout('hideMens()', 1000);break;
 case "Womens" : timeout = setTimeout('hideWomens()', 1000);break;
}
});

});

//Calling all the functions to hide everything
function hideMens() {
    $('#Mens').hide();
}
function hideWomens() {
    $('#Womens').hide();
}
function hideKids() {
    $('#Kids').hide();
}
function hideGear() {
    $('#Gear').hide();
}

</script>

$('li.nav-Mens, #Mens').bind("mouseout", function() {
    timeout = setTimeout('hideMens()', 1000);
});