Jquery on() 사용자 정의 객체의 function click

Question

Javascript 및 jquery에서 사용자 정의 탭 위젯을 작성하려고합니다. 탭 객체를 만들었지 만 click 이벤트를 할당하는 동안 문제가 발생하면 코드를 살펴보십시오. 이벤트를 첨부했지만 마지막 객체에서만 작업 중입니다. 누군가 이걸 더 좋은 방법을 제안 할 수 있습니까

function TabTitleBox(TabName){ 
    this.SelectedBox = 0; 
    this.TitleBoxContainer = $('<div>'+TabName+'</div>'); 
    this.TitleBoxContainer.addClass("STATSTab"); 
    this.TitleBoxContainer.addClass("UnSelectedTab"); 
    this.TitleBoxContainer.on('mouseenter',function(){ 
    CurrentColor = $(this).css('background-color'); 
    var t = tinycolor(CurrentColor); 
    var NewColor = tinycolor.saturate(t,50); 
    $(this).css("background-color",NewColor); 
    }).on('mouseleave',function(){ 
    $(this).removeAttr('style','background-color'); 
    }); 

    this.SelectTab = function(){ 
    if(this.SelectedBox == 0){ 
    $(this.TitleBoxContainer).removeClass("UnSelectedTab"); 
    $(this.TitleBoxContainer).addClass("SelectedTab"); 
    this.SelectedBox = 1; 
    } 
    } 

    this.RemoveStyle = function(){ 
    $(this.TitleBoxContainer).removeAttr('style','background-color'); 
    } 

    this.UnSelectTab = function(){ 
    if(this.SelectedBox == 1){ 
    $(this.TitleBoxContainer).removeClass("SelectedTab"); 
    $(this.TitleBoxContainer).addClass("UnSelectedTab"); 
    this.SelectedBox = 0; 
    } 
    } 

    return this; 
} 


TabContainer = new Array(); 
TabContainer.push(new TabTitleBox("Is first tab")); 
TabContainer.push(new TabTitleBox("Is Second tab")); 
TabContainer.push(new TabTitleBox("Is Third tab")); 
TabContainer.push(new TabTitleBox("Is Fourth tab")); 

for(var x = 0; x < TabContainer.length ; x++){ 
    Tab = TabContainer[x]; 
    $('body').append(Tab.TitleBoxContainer); 
    $(Tab.TitleBoxContainer).on('click', function(){ 
    if(Tab.SelectedBox == 1){ 
     Tab.UnSelectTab(); 
     Tab.SelectedBox = 0; 
    }else{ 
     Tab.SelectTab(); 
     Tab.SelectedBox = 1; 
    } 
    Tab.RemoveStyle(); 
    }); 
} 

내 코드에서 다음과 같이 답변을 변경해 주셔서 감사합니다. 링크는 여기에서 찾을 수 있습니다. http://skondgekar.comeze.com/Test.php

 TabContainer = new Array(); 
     TabContainer.push(new TabTitleBox("Is first tab")); 
     TabContainer.push(new TabTitleBox("Is Second tab")); 
     TabContainer.push(new TabTitleBox("Is Third tab")); 
     TabContainer.push(new TabTitleBox("Is Fourth tab")); 

     var funcs = []; 

     for(var x = 0; x < TabContainer.length ; x++){ 
      Tab = TabContainer[x]; 
      funcs[x] = (function(Tab){ 
       return function(){ 
        $(Tab.TitleBoxContainer).on('click', function(){ 
          if(Tab.SelectedBox == 1){ 
           Tab.UnSelectTab(); 
          }else{ 
           Tab.SelectTab(); 
          } 
          Tab.RemoveStyle(); 
         }); 
       } 
       })(Tab); 

      funcs[x](); 
      $('body').append(Tab.TitleBoxContainer); 
     } 

Answer 1

클릭 처리기에 적절한 폐쇄를 구현해야합니다. 것

// (This is untested, but should be pretty close to what you need) 

for(var x = 0; x < TabContainer.length ; x++){ 
    Tab = TabContainer[x]; 
    $('body').append(Tab.TitleBoxContainer); 
    $(Tab.TitleBoxContainer).on('click', myClosure(Tab)); // Calling the closure 
} 

function myClosure(Tab) { // Binding the current value of the Tab to the function it 
    return function()  // and returning the function 
     if(Tab.SelectedBox == 1){ 
      Tab.UnSelectTab(); 
      Tab.SelectedBox = 0; 
     }else{ 
      Tab.SelectTab(); 
      Tab.SelectedBox = 1; 
     } 
     Tab.RemoveStyle(); 
    }); 
} 

폐쇄를 작성하는 또 다른 방법 :

나에게 올바른 방향을 제시해 보자

for(var x = 0; x < TabContainer.length ; x++){ 
    Tab = TabContainer[x]; 
    $('body').append(Tab.TitleBoxContainer); 
    $(Tab.TitleBoxContainer).on('click', function(theRealTab) { // Creating closure 
    return function(){ 
     if(theRealTab.SelectedBox == 1){ 
     theRealTab.UnSelectTab(); 
     theRealTab.SelectedBox = 0; 
     }else{ 
     theRealTab.SelectTab(); 
     theRealTab.SelectedBox = 1; 
     } 
     theRealTab.RemoveStyle(); 
    } 
    })(Tab); // Binding the current value of Tab to the function variable theRealTab 
} 

폐쇄하지 않고, 당신의 클릭 기능의 탭 변수는 항상있을 것입니다 변수의 현재 값 (이 예제에서는 for 루프의 경우 마지막으로 처리 된 Tab). 더 많은 정보를 들어

:

Closures inside loops - 허용 대답은 루프를 입력하기 전에 TabContainer.length의 값을 무엇이

How do closures work