在jQuery中使用if語句創建函數

Question

我對jQuery相當陌生，並且不擅長創建變量和函數，但我希望我的代碼能夠被壓縮並更「優雅」。

目前，我的整個jQuery的代碼如下所示：

$(document).ready(
    $('div.pane').scrollTo(0), 
    $.scrollTo(0), 
    $.localScroll({ duration:400,}) 
    ); 

（scrollTo/localScroll兩個插件。）

var gom = function(){$('#content').children().animate({opacity: 0.4}, 200); } 
var visa = function() {animate({opacity: 1 }, 400);} 

$('#ntop').click(function(){ 
    gom(); 
}); 

$('#nmind').click(function(){ 
    gom(); 
    $('#secmind').animate({opacity: 1 }, 400); 
}); 

$('#nheart').click(function(){ 
    gom(); 
    $('#secheart').animate({opacity: 1 }, 400); 
}); 

$('#nhands').click(function(){ 
    gom(); 
    $('#sechands').animate({opacity: 1 }, 400); 
}); 

$('#nfeet').click(function(){ 
    gom(); 
    $('#secfeet').animate({opacity: 1 }, 400); 
}); 

$('#foot').click(function(){ 
    gom(); 
}); 

$('#secmind').mouseenter(function(){ 
    if($('#secmind').css('opacity') < '1') { 
    gom(); 
    $('#secmind').animate({opacity: 1 }, 400); } 
}); 

$('#secheart').mouseenter(function(){ 
    if($('#secheart').css('opacity') < '1') { 
    gom(); 
    $('#secheart').animate({opacity: 1 }, 400); } 
}); 

$('#sechands').mouseenter(function(){ 
    if($('#sechands').css('opacity') < '1') { 
    gom(); 
    $('#sechands').animate({opacity: 1 }, 400); } 
}); 

$('#secfeet').mouseenter(function(){ 
    if($('#secfeet').css('opacity') < '1') { 
    gom(); 
    $('#secfeet').animate({opacity: 1 }, 400); } 
}); 

這裏的HTML：

  <div id="wrapper"> 
      <img src="b6.png" id="imgsimon" /> 
      <a name="sectop"></a> 


     <div id="nav"> 
     <ul> 
      <li id="ntop"> <a href="#sectop">Top</a> </li> 
      <li id="nmind"> <a href="#secmind">Inspiration</a> </li> 
      <li id="nheart"> <a href="#secheart">Interests</a> </li> 
      <li id="nhands"> <a href="#sechands">Work</a> </li> 
      <li id="nfeet"> <a href="#secfeet">Aspirations/Anticipations</a> </li> 
      <li id="foot"> <a href="#secfooter">Contact Me!</a> </li> 
     </ul> 

    </div> 
    <div id="rubrik"> 
    <h1>Header 1</h1> 
    <p>Hey!</p> 
    </div> 

    <div id="content"> 

     <div class="text" id="secmind"><a name="secmind"></a> 
      <h2>Inspiration</h2> 
      <p>Bla bla</p> 
     </div> 

     <div class="text" id="secheart"><a name="secheart"></a> 
      <h2>Interests</h2> 
      <p>Bla bla bla bla bla</p> 
     </div> 


     <div class="text" id="sechands"><a name="sechands"></a> 
      <h2>Work</h2> 
      <p>Bla bla bla bla</p> 
     </div> 

     <div class="text" id="secfeet"><a name="secfeet"></a> 
      <h2>Aspirations/Anticipations</h2> 
      <p>Bla bla bla</p> 
     </div> 

    </div> 
    <div id="footer"><a name="secfooter"></a> 
      <h2>Contact me!</h2> 
      <p>Bla bla</p> 
      <p>Bla bla</p> 
    </div> 
</div> 

的「gom」功能工作正常，但我不知道「簽證」的問題是什麼。另外，我假設你可以更平滑地編寫if函數，所以你只需要寫入一次，而不必爲每個單獨的id重複。

歡迎任何幫助，網頁工作正常，我只是想知道如何以更好，更快，更優雅的方式寫這個。非常感謝！

Answer 1

您可以使用.each()

Documentation

Answer 2

在 visa功能

沒有要動畫沒有選擇元素：

這樣的：

var visa = function() {animate({opacity: 1 }, 400);} 

應該是：

var visa = function() { $('anElement').animate({opacity: 1 }, 400) } 

您還可以嘗試選擇錨元素，而不是分別選擇它們中的每一個：

$('ul li a').click(function(e){ 
    e.preventDefault(); // prevents default action of the anchor link 
    gom(); 
    var id = $(this).attr('href').remove('#',''); 
    $('#' + id).animate({opacity: 1 }, 400); 
}); 

$('#content div').mouseenter(function(){ 
    if($(this).css('opacity') < '1') { 
    gom(); 
    $(this).animate({opacity: 1 }, 400); } 
});