Question

我试图通过使用JQuery（1.7.1或2.2.3）将我的一些Java对象合并到我的动态文档中。为此，我考虑使用JQuery .extend()函数来扩充一个基本的JQuery对象，然后将其附加到我的文档中。

我认为我的方法存在问题（我在问题的最后部分进行了更正），但我发现了一种误导性的行为，我无法解释并使我的代码部分工作，当我认为它应该完全是否工作。

我的代码的总体目的是在代码中添加一个“按钮”元素（在<div>部分中），以便在单击此元素时应用某些特定处理以及对其进行一些其他处理它。基本上，我希望我的“按钮”JQuery对象的行为类似于我创建的Button JavaScript对象/类（正如我所期望的那样，采用面向对象的方法）。

以下是Button对象的简化代码：

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

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

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

以下是代码中的“创建+操作”部分：

function associateButtons()
{
    var myButton = createButton();

    // Add an action on click => Works "as excepted" => print the state when the button will be clicked
    myButton.on( "click", myButton, function(event) {
        console.log("click inner HTML:" + event.data.html()); // OK: print the JQuery associated HTML
        event.data.printState(); // OK: call the associated function
    });


    $( "#buttons_container" ).append( myButton ); // Add the button to the page at the specified place
    $( "#buttons_container" ).append( myButton.clone() ); // Add the same button a second time, but won't have the "onclick" bind

    // Do an action no each button => Does not work! => The function is undefined
    $( "#buttons_container #button" ).each( function(index,element) {
        console.log("each inner HTML:" + $(element).html()); // OK: print the JQuery associated HTML, same as above ; also works with $(this)
        $(element).printState(); // FAIL: "TypeError: undefined is not a function"
    });
}

现在，运行测试：

associateButtons();

所以我想知道为什么“事件”方法有效，而“每个”方法没有？我怀疑事件管理器传递的元素类型（显然是通过结构event.data封装JQuery + Button对象的对象）与“每个管理器”传递的元素不同（其中不是JQuery + Button对象，而是“简单”的JQuery对象。）

我设法找到了解决方法，但通过.data()函数将Button封装在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;
}

在事件（event.data.data("button")）和“每个”（$(element).data("button")）中使用该对象，效果很好。

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

有没有办法实现它，我在“每次”治疗中遗漏了什么？

提前致谢;）

Answer 1

1）您将几个带有相同id（"button"）的按钮附加到同一个HTML文档中，这是邪恶的。

2）当你执行result.extend( new Button(false) );时，只向{@ 1}}对象添加属性，不添加到HTML元素，显然，{i}返回的jQuery对象{1}}，也不是jQuery result循环中的jQuery对象。

编辑：

执行此操作时：

$( "#buttons_container #button" )

您正在为forEach函数返回的对象添加一个click事件处理程序，扩展，因此您可以访问其上的printState属性。

但是当你做的时候

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

createButton是一个基本的jQuery对象，不扩展，因此没有$( "#buttons_container #button" ).each( function(index,element) { console.log("each inner HTML:" + $(element).html()); $(element).printState(); });属性。

此外，我认为你应该看看jQuery plugin resources。

JQuery .extend（）和Javascript类

1 个答案: