Javascript Jquery on（）单击自定义对象上的函数

我正在尝试用Javascript和jquery创建自定义选项卡小部件。我已经创建了tab对象，但在分配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();
  });
}

函数选项卡标题框（选项卡名称）{
this.SelectedBox=0；
this.TitleBoxContainer=$（“”+TabName+“”）；
这个.TitleBoxContainer.addClass（“STATSTab”）；
这个.TitleBoxContainer.addClass（“未选择的选项卡”）；
this.TitleBoxContainer.on（'mouseenter'，function（）{
CurrentColor=$（this.css（'background-color'）；
var t=tinycolor（当前颜色）；
var NewColor=tinycolor.饱和（t，50）；
$（this.css（“背景色”，NewColor）；
}).on（'mouseleave'，function（）{
$（this.removeAttr（'style'，'background-color'）；
});
this.SelectTab=函数（）{
如果（this.SelectedBox==0）{
$（this.TitleBoxContainer）.removeClass（“UnSelectedTab”）；
$（this.TitleBoxContainer）.addClass（“SelectedTab”）；
this.SelectedBox=1；
}
}
this.RemoveStyle=函数（）{
$（this.TitleBoxContainer）.removeAttr（'style'，'background-color'）；
}
this.UnSelectTab=函数（）{
如果（this.SelectedBox==1）{
$（this.titleBox容器）.removeClass（“SelectedTab”）；
$（this.TitleBoxContainer）.addClass（“未选择的选项卡”）；
this.SelectedBox=0；
}
}
归还这个；
}
TabContainer=新数组（）；
TabContainer.push（新的TabTitleBox（“是第一个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第二个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第三个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第四个选项卡”）；
对于（var x=0；x

找到了解决方案，感谢在我的代码中所做的如下更改。链接可以在这里找到

TabContainer=newarray（）；
TabContainer.push（新的TabTitleBox（“是第一个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第二个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第三个选项卡”）；
TabContainer.push（新的TabTitleBox（“是第四个选项卡”）；
var funcs=[]；
对于（var x=0；x

您需要在单击处理程序上实现正确的闭包

让我为你指出正确的方向：

// (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();
    });
}

//（这是未经测试的，但应该非常接近您需要的）
对于（var x=0；x

编写闭包的另一种方法是：

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（var x=0；x

如果没有闭包，click函数中的Tab变量将始终是变量的当前值（在本例中-如果for循环，则为最后处理的选项卡）

有关更多信息：

-被接受的答案有一个与此非常类似的例子

---

进入循环前TabContainer.length的值是多少，最后一个右括号后的x值是多少？是否将所有4个选项卡都添加到正文中？您使用什么来验证事件是否已附加？我可以使用click event在浏览器中获取元素，也可以使用alert语句获取元素的innerHTML，但单击元素时，它只会更改最后一个对象的类，而不会更改正在单击的对象的类。您需要在单击功能上实现适当的关闭，或者尝试用$（this）而不是Tab引用活动对象，因为在执行单击功能时，Tab引用的是最后处理的选项卡。我已经在这里上传了我的代码，我完全被卡住了，尝试了所有操作。请帮助我添加了两个示例，说明如何通过实现闭包来解决问题。

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
}