在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); } 
});