Jquery on（）點擊自定義對象上的函數

Question

我想在Javascript和jQuery中創建自定義選項卡小部件。我已經創建了標籤對象，但在分配單擊事件時遇到問題，請查看代碼。我附加了事件，但它僅對最後一個對象起作用。有人可以建議更好的方法來做到這一點

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循環爲最後一個製表符）。

欲瞭解更多信息：

Closures inside loops - 公認的答案已經非常相似，這

How do closures work