Jquery on() 自定义对象上的点击功能答案

【问题标题】：Jquery on() click function on custom objectJquery on() 自定义对象上的点击功能
【发布时间】：2014-01-15 16:26:55
【问题描述】：

我正在尝试在 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);
        }

【问题讨论】：

进入循环前的 TabContainer.length 和最后的右括号后的 x 的值是多少？是否将所有 4 个选项卡都添加到正文中？您使用什么来验证事件是否已附加？
我能够在我的浏览器中获取元素，并且还能够使用单击事件使用警报语句获取它们的 innerHTML，但是在单击元素时它只会更改最后一个对象的类而不是对象的类点击
你需要在你的点击函数上实现一个适当的闭包，或者尝试使用 $(this) 而不是 Tab 来引用活动对象，因为当点击函数被执行时，Tab 指的是最后一个 Tab已处理。
我已经在这里上传了我的代码skondgekar.comeze.com/Test.php 我完全坚持尝试了一切。请帮忙
我添加了两个示例，说明如何通过实现闭包来解决问题。

标签： javascript jquery custom-object

【解决方案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
}

如果没有闭包，点击函数中的 Tab 变量将始终是变量的当前值（在此示例中 - 如果您的 for 循环，则处理的最后一个 Tab）。

更多信息：

Closures inside loops - 接受的答案有一个与此非常相似的示例

How do closures work

【讨论】：