jQuery/Javascript 코드 단순화

Question

코드를 단순화하기 위해 '$ (input [data-code])). each'함수를 사용하여 코드를 단순화하려고 노력했습니다. 코드는 사용자가 앵커 링크, 그것은처럼 보이는 그 자리에 그것을 아래로 애니메이션을

$('a.welcome').click(function(){ 
    $('html, body').animate({scrollTop:0}, 2000, function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

$('a.step1').click(function(){ 
    $('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

$('a.step2').click(function(){ 
    $('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

$('a.step3').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $('#step3').offset().top - 70 
    }, 2000, function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

그리고 난 지금까지이 보이는 단순화하기 위해 마련 한 것을 :

$("input[data-code]").each(function() { 
    $(this).click(function(){ 
     $('html, body').animate({ 
      scrollTop: $($(this).data("code")).offset().top - 70 
     }, 2000, function() { 
      parallaxScroll(); 
     }); 
     return false; 
    }); 
}); 

하지만 작동하지 않는 것 같습니다 : (

<nav id="primary"> 
    <ul> 
     <li> 
      <h1>Welcome</h1> 
      <a class="welcome" href="#welcome" data-code="0">View</a> 
     </li> 
     <li> 
      <h1>Step 1: Setup</h1> 
      <a class="step1" href="#step1" data-code="#step1">Step 1</a> 
     </li> 
     <li> 
      <h1>Step 2: Data Management</h1> 
      <a class="step2" href="#step2" data-code="#step2">Step 2</a> 
     </li> 
     <li> 
      <h1>Step 3: Configure Cameras</h1> 
      <a class="step3" href="#step3" data-code="#step3">View</a> 
     </li> 
    </ul> 
</nav> 

어떤 아이디어 : 0 나의 이론은 $(this).click(function(){ 실제로 제대로 링크 $(a.welcome).click(function(){

실제 HTML 지금과 같은 스타일의 요소를 호출되지 않는 것입니다?

Answer 1

내가 이런 식으로 할 거라고, 나는 생각한다. 앵커 태그를 대상으로 지정하려고합니다.

$("a[data-code]").click(function(){ 
    var val = $(this).data("code") ? $($(this).data("code")).offset().top - 70 : 0; 
    $('html, body').animate({ 
     scrollTop: val 
    }, 2000, function() { 
     parallaxScroll(); 
    }); 
return false; 
}); 

Answer 2

당신은 클릭 기능

$('#primary a').on('click', function() { 
    var offSet = $($(this).data('code')).offset().top - 70; 
    if ($(this).is('.welcome')) { 
     offSet = 0; 
    } 
    $('html, body').animate({ 
     scrollTop: offSet 
    }, 2000, 

    function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

Answer 3

간단한

$('#scroll a').click(function(){ 
    $('html, body').animate({scrollTop: $(this).offset().top - 70}, 2000, 
    function() { 
     parallaxScroll(); 
    }); 
    return false; 
}); 

에이에서 사용할 수 있으며, 추가 id = "scroll"ul

<nav id="primary"> 
     <ul id = "scroll"> 
      <li> 
       <h1>Welcome</h1> 
       <a class="welcome" href="#welcome" data-code="0">View</a> 
      </li> 
      <li> 
       <h1>Step 1: Setup</h1> 
       <a class="step1" href="#step1" data-code="#step1">Step 1</a> 
      </li> 
      <li> 
       <h1>Step 2: Data Management</h1> 
       <a class="step2" href="#step2" data-code="#step2">Step 2</a> 
      </li> 
      <li> 
       <h1>Step 3: Configure Cameras</h1> 
       <a class="step3" href="#step3" data-code="#step3">View</a> 
      </li> 
     </ul> 
</nav> 

작동 할 것이다.

Answer 4

jQuery 코드가 앵커 태그 대신 HTML 입력 태그를 타겟팅하고 있습니다.

변경 :

$("input[data-code]").each(function() { 

에가 :

$("a[data-code]").each(function() {