Javascript가 이전 기능을 덮어 쓰지 않게 만드는 방법은 무엇입니까?

Question

<!-- inEar --> 
$("#inEear ul li a").ready(function(){ 
    thisBlock = $("#dueceBlock"); 
    maxWidth = 280; /*controls max width of the block*/ 
    minWidth = 180; /*controls min widht of the block*/ 


    $("#inEar ul li a").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 
<!-- inEar end--> 

<!-- onEar --> 
$(".onEarLink").ready(function(){ 
    thisBlock = $("#chillBlock"); 
    maxWidth = 280; /*controls max width of the block*/ 
    minWidth = 180; /*controls min widht of the block*/ 


    $(".onEarLink").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 
<!-- onEar end--> 

<!-- overEar --> 
$(".overEarLink").ready(function(){ 
    thisBlock = $("#heroBlock"); 
    maxWidth = 400; /*controls max width of the block*/ 
    minWidth = 100; /*controls min widht of the block*/ 


    $(".overEarLink").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 

---

내 문제는 다음 세 번째 기능 (.overEarLink)가 제 1 함수 (#inEar 상향 리튬 a)과 초 함수 (.onEarLink)을 덮어 보관. 이것은 내가 원하는 것이 아닙니다. 3 가지 함수 호출을 통해 서로 다른 부분을 만들고 자신의 애니메이션을 제어하려고합니다. 왜 각 함수의 다른 이름을 지정했는지, 왜 세 번째 함수가 첫 번째 함수와 두 번째 함수를 덮어 쓰는 지 이해하지 못했습니다.

모두에게 감사드립니다.

---

답변을 추가해 주셔서 감사합니다. 그러나 maxWidth 및 minWidth에도 var를 사용했습니다. 그러나 같은 일이 발생했습니다. 세 번째 var가 첫 번째 var 및 두 번째 var을 다시 덮어 씁니다. 코드는 다음과 같습니다.

$("#overEar ul li a").ready(function(){ 
    var thisBlock = $("#heroBlock"); 
    var maxWidth = 358; /*controls max width of the block*/ 
    var minWidth = 180; 

    var thisBlock = $("#reverbBlock"); /*controls min widht of the block*/ 
    var maxWidth = 340; 
    var minWidth = 180; 

    var thisBlock = $("#solosBlock"); 
    var maxWidth = 402; 
    var minWidth = 180; 

    $("#overEar ul li a").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 

모두의 답변에 감사드립니다.

Answer 1

로컬 변수을 사용해야 각 기능에 다른 기능과 별도의 변수가 있습니다. 예를 들어,이 변경이에

thisBlock = $("#heroBlock"); 
    maxWidth = 400; /*controls max width of the block*/ 
    minWidth = 100; /*controls min widht of the block*/ 

을 :

var thisBlock = $("#heroBlock"); 
    var maxWidth = 400; /*controls max width of the block*/ 
    var minWidth = 100; /*controls min widht of the block*/ 

var 키워드는 제한이 선언 된 것있는 특정 기능에 대한 변수의 scope.