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-function을 좀 더 부드러운 방법으로 작성할 수 있으므로 한 번만 작성하고 모든 ID마다 반복하지 않아도됩니다.

도움이 되셨다면, 웹 페이지가 잘 작동하고 있습니다. 더 빠르고 더 빠르고 우아한 방법으로이 글을 쓰는 방법을 알고 싶습니다. 고마워요!

Answer 1

당신은 사용할 수 있습니다 visa 기능에 .each()

Documentation

Answer 2

는 애니메이션 할 선택 요소가 없습니다 :

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