jQuery 여러 div에 대해 복수 스크립트 자동화 jQuery에서

Question

나는 항상 이중 작업을 많이 겪게됩니다. 내 말은, 나는 다른 div들에게 똑같은 것을 씁니다.

나는 다음과 같은 코드가 있습니다 :

var about = $('#about').offset().top - parseFloat($('#about').css('margin-top').replace(/auto/, 0)); 
var education = $('#education').offset().top - parseFloat($('#education').css('margin-top').replace(/auto/, 0)); 
var work = $('#work').offset().top - parseFloat($('#work').css('margin-top').replace(/auto/, 0)); 

및

$(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= about) { 
     // if so, ad the fixed class 
     $('#nav li').removeClass('current'); 
     $('.ab_about').addClass('current'); 
    } else { 
     // otherwise remove it 
     $('.ab_about').removeClass('current'); 
    } 

    // whether that's below the form 
    if (y >= education) { 
     // if so, ad the fixed class 
     $('#nav li').removeClass('current'); 
     $('.ab_education').addClass('current'); 
    } else { 
     // otherwise remove it 
     $('.ab_education').removeClass('current'); 
    } 

    // whether that's below the form 
    if (y >= work) { 
     // if so, ad the fixed class 
     $('#nav li').removeClass('current'); 
     $('.ab_work').addClass('current'); 
    } else { 
     // otherwise remove it 
     $('.ab_work').removeClass('current'); 
    } 

}); 

당신은 내가 그 항목 (20)이있는 경우, 그것은 거 매우 긴 스크립트 수 있다고 말할 수

: P 에 어떤 생각 일을 자동화하고 더 작게 만드는 방법. 나는 각각의 방법으로 무언가를 시도했지만 그것은 나를위한 막 다른 길이었다.

u는 단순한 플러그인을 작성하고 같은 그 div에 해당 플러그인을 할당 할 수 있습니다

Answer 1

타이 :

$.fn.myplugin = function(options){ 
    var $this = $(this); 
    var $navli = $(options.navli); 
    var $abClass = $(options.abClass); 
    var offset = $this.offset().top - parseFloat($this.css('margin-top').replace(/auto/, 0)); 
    $(window).scroll(function (event) { 
     // what the y position of the scroll is 
     var y = $(this).scrollTop(); 

     // whether that's below the form 
     if (y >= offset) { 
      // if so, ad the fixed class 
      $navli.removeClass('current'); 
      $abClass.addClass('current'); 
     } else { 
      // otherwise remove it 
      $abClass.removeClass('current'); 
     } 
    } 
} 

$(document).ready(function(){ 
    $('#about').myplugin({'navli': '#nav li', 'abClass': '.ab_about'}); 
}); 

Answer 2

나는 당신이 뭘하려는 건지 아무 생각이 없지만, 그것의 모습에서 JS를 사용해서는 안됩니다.

아무튼, 그것을 단순화하는 가장 좋은 방법은 jQuery 플러그인을 만드는 것입니다. 다음과 같은 것 :

$.fn.fixStuff = function() { 
    return this.each(function() { 
     var $this = $(this); 
     return $this.offset().top - parseFloat($this.css('margin-top').replace(/auto/, 0)); 
    }); 
}; 

$('#about, #edutcation, #work').fixStuff();