Question

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

<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看起来像这样

// JavaScript Document
$(document).ready(function() {

//Mens
$("li.nav-Mens").mouseover(function() {
    clearTimeout(timeout);
    $('#Mens').show();
    $('#Womens').hide();
    $('#Kids').hide();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Mens").mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});
$('#Mens').mouseover(function() {
    clearTimeout(timeout);
});
$('#Mens').mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});

//Womens
$("li.nav-Womens").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').show();
    $('#Mens').hide();
    $('#Kids').hide();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Womens").mouseout(function() {
    timeout = setTimeout('hideWomens()', 1000);
});
$('#Womens').mouseover(function() {
    clearTimeout(timeout);
});
$('#Womens').mouseout(function() {
    timeout = setTimeout('hideWomens()', 1000);
});

//Kids
$("li.nav-Kids").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').hide();
    $('#Mens').hide();
    $('#Kids').show();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Kids").mouseout(function() {
    timeout = setTimeout('hideKids()', 1000);
});
$('#Kids').mouseover(function() {
    clearTimeout(timeout);
});
$('#Kids').mouseout(function() {
    timeout = setTimeout('hideKids()', 1000);
});

//Gear
$("li.nav-Gear").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').hide();
    $('#Mens').hide();
    $('#Kids').hide();
    $('#Gear').show();
});
var timeout;
$("li.nav-Gear").mouseout(function() {
    timeout = setTimeout('hideGear()', 1000);
});
$('#Gear').mouseover(function() {
    clearTimeout(timeout);
});
$('#Gear').mouseout(function() {
    timeout = setTimeout('hideGear()', 1000);
});

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

知道如何让jquery变小但更小吗？

Answer 1

如果他们调用相同的闭包，可以合并一些绑定。

这

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


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

到

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

和

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

）;

Answer 2

这就是我想出的对于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>

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

Answer 3

如果您担心带宽：

Gzip it

如果您担心执行时间：

对其进行描述并意识到它没有区别

Answer 4

此外，jQuery具有绑定事件（“bind”）的功能，这通常是最好的方法：

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

您可以在此处阅读相关内容 - http://docs.jquery.com/Events/bind#typedatafn

压缩jQuery mouseOver和mouseOut

4 个答案: