extend（）和Javascript类

我试图通过使用JQuery（1.7.1或2.2.3）将一些Java对象合并到动态文档中。为此，我考虑使用JQuery

.extend（）

函数来扩充一个基本的JQuery对象，然后将其附加到文档中

我认为我的方法有问题（我在问题的末尾纠正了），但我发现了一种误导行为，当我认为代码应该完全工作或根本不工作时，我无法解释并使代码部分工作

我的代码的总体目的是在代码中添加一个“button”元素（在

部分中），以便在单击该元素时应用一些特定的处理方法，以及对其进行一些其他处理。基本上，我希望我的“button”JQuery对象的行为与我创建的

button

JavaScript对象/类类似（正如我在面向对象方法中所期望的那样）

以下是

按钮

对象的简化代码：

function Button( myState )
{
    this.setState(myState);
}
Button.prototype.printState = function()
{
    console.log( this.state );
}
Button.prototype.setState = function(myState)
{
    this.state = myState;
}

以下是创建对象的JQuery+按钮基本代码：

// Create a "JQuery+Button" object
function createButton()
{
    var result = $("<a href='#' id='button'></a>");
    result.extend( new Button(false) ); // Can also be done with result = $.extend( result, new Button(false) );
    result.append( "clickable button" ); // A dummy button text, see below

    result.printState(); // OK: print "false"
    return result;
}

现在，运行测试：

associateButtons();

所以我想知道为什么“event”方法有效而“each”方法无效？我怀疑事件管理器传递的元素（这显然是一个通过结构

event.data

）封装JQuery+按钮对象的对象）与“每个管理器”（不是JQuery+按钮对象，而是一个“简单”JQuery对象）传递的元素的类型不同

我设法找到了解决方法，但通过

.data（）

函数将按钮封装在JQuery中：

// Create a "JQuery+Button" object
function createButton()
{
    var result = $("<a href='#' id='button'></a>");
    result.data( "button", new Button(false) );
    result.append( "clickable button" ); // A dummy button text, see below

    result.data("button").printState(); // OK: print "false"
    return result;
}

//创建一个“JQuery+按钮”对象
函数createButton（）
{
变量结果=$（“”）；
结果.数据（“按钮”，新按钮（假））；
result.append（“可点击按钮”）；//一个虚拟按钮文本，见下文
result.data（“button”）.printState（）；//确定：打印“false”
返回结果；
}

在事件（

event.data.data（“button”）

）和“each”（

$（element.data（“button”）

）中使用该对象，效果很好

然而，它并不像我理想的“JQuery+Button”对象所定义的那样“面向对象”

有没有办法做到这一点，我是否在“每个”治疗中遗漏了什么

提前感谢；）

1）您在同一HTML文档中添加了几个具有相同

id的按钮（
“按钮”
），这是非常有害的

2） 当您执行
result.extend（新建按钮（false））时
，只向
结果
对象添加属性，不向HTML元素添加属性，显然也不向
$（“#按钮#容器#按钮”）
返回的jQuery对象添加属性，也不向jQuery
forEach
循环中的jQuery对象添加属性

编辑：

执行此操作时：

var myButton = createButton();
myButton.on( "click", myButton, function(event) { (...) }

您正在向
createButton
函数返回的对象添加一个click事件处理程序，该函数是扩展的，因此您可以访问该函数的printState属性

但当你这么做的时候

$( "#buttons_container #button" ).each( function(index,element) {
  console.log("each inner HTML:" + $(element).html());
  $(element).printState();
});

$（element）
是一个基本的jQuery对象，它没有扩展，因此没有
printState
属性

此外，我认为您应该看看。
谢谢您的回答和链接！1） 我的坏，当然ID必须是唯一的，根据标准。2） 对。然而，我认为这项行动根本不起作用或完全起作用。但是，它确实适用于
click
事件（通过
event.data
实例），并且在遍历树时不起作用。我猜创建的事件对象是由JQuery库完成的，并且在某个地方跟踪了
JQuery+按钮
对象，以便在触发事件时可用。因此，必须有一种方法来获取这个
JQuery+按钮
obj。不知怎么的，我在别处补充了更多的解释。我希望它能帮助你更好地理解。谢谢你的回答，现在更清楚了；）
$( "#buttons_container #button" ).each( function(index,element) {
  console.log("each inner HTML:" + $(element).html());
  $(element).printState();
});