我需要Javascript關閉嗎？

對於下面的額外代碼，有什麼更好的方法來實現這一點。我需要關閉嗎？如果是的話，怎麼樣？我需要Javascript關閉嗎？

我有一個左側導航和鼠標懸停我需要顯示頁面內容。我在css裏有一個類.first{visibility:visible;top:150px;}

這就是我用來完成這個的。

<script type="text/javascript"> 
    $(function() { 
     var $items = $("#sidebar > ul >li") 

     $("#mainabout").addClass("first"); 
     $(".about").mouseover(function() { 
      $("#mainabout").addClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
      //$("#main").css("background-image","url('revoliution2010_btbg.png')"); 
     }); 

     $(".education").mouseover(function() { 
      $("#maineducation").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".experience").mouseover(function() { 
      $("#mainexperience").addClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".projects").mouseover(function() { 
      $("#mainprojects").addClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 
      $("#maincontacts").removeClass("first"); 
     }); 
     $(".contact").mouseover(function() { 
      $("#maincontacts").addClass("first"); 
      $("#mainprojects").removeClass("first"); 
      $("#mainexperience").removeClass("first"); 
      $("#mainabout").removeClass("first"); 
      $("#maineducation").removeClass("first"); 

     }); 
    }) 
</script>

我該如何讓這個jquery小巧並優化，或者有什麼更好的方法來做到這一點。

來源

2011-04-26 singularity

我在那個代碼中看到了一個模式。如果你可以在代碼中看到一個模式，你可以使它更小。發佈你的HTML並提供你想要完成的更多細節。我假設這是一個菜單 – JohnP 2011-04-26 05:12:04

我會去用：

$(".education").mouseover(function() { 
    $items.removeClass("first"); 
    $("#maineducation").addClass("first"); 
}); 
// etc..

，你可以用抽象更進了一步：

var regover = function (source, main) { 
    source.mouseover(function() { 
     $items.removeClass("first"); 
     main.addClass("first"); 
    }; 
};

您的註冊電話僅僅是：

regover($(".education"), $("#maineducation"));

很小的！

只要確保在定義$items的相同範圍內定義regover即可。這就是「閉包」的意思 - 函數引用外部範圍中的變量。例如：

var $items = ...; 
var regover = function(source, main) { ... }

這樣函數可以「看到」$items變量。

來源

2011-04-26 05:12:20 luqui

您可以編寫一個函數，刪除所有第一類。現在在添加你需要的一個類之前調用這個函數。

來源

2011-04-26 05:14:11 timbooo

我需要Javascript關閉嗎？

回答

相關問題