gpt4 book ai didi

javascript - 在该对象生成的 HTML 元素中引用 JS 对象

转载 作者:行者123 更新时间:2023-12-03 01:32:30 25 4
gpt4 key购买 nike

我的 JavaScript 对象创建一些 HTML 元素(例如两个按钮),在用户单击这些按钮后,我应该调用该对象的某些方法。那么问题是如何在 HTML 元素中引用 JS 对象来调用其方法?

<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myObj(){
this.a = null;

this.setA = function(a){
this.a = a;
}

this.requestA = function(){
$( "body" ).append($('<input><button onclick="referenceToMyObject.setA($(this).prev().val());">Set A</button>'));
}
return this;
}

</script>
</head>
<body>
<script>
var myObjInst = myObj();
myObjInst.requestA();

</script>
</body>

最佳答案

内联创建事件处理程序 (onclick="foo()") 不允许您引用该对象,并且在任何情况下都不鼓励这样做,因为您应该避免将字符串作为代码进行计算。此外,您的代码在某种程度上绕过了 JavaScript 的对象概念。您可以按如下方式重新表述:

function MyObj() {
this.a = null;
}

MyObj.prototype.setA = function(a) {
const old = this.a;

this.a = a;

console.log("Updated a from", old, "to", this.a);
};

MyObj.prototype.requestA = function() {
const input = $("<input type='text'>");
const button = $("<button>Set A</button>");

button.click((e) => {
this.setA($(e.target).prev().val());
});

const body = $("body");
body.append(input);
body.append(button);
};

$(document).ready(() => {
const myObjInst = new MyObj();
myObjInst.requestA();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在这里,我们使用 button.click 定义事件处理程序,并使用 new MyObj() 实例化该对象。除此之外,我清理了一些代码并添加了一些日志记录,以便您可以看到发生了什么。

您仍然可以在构造函数中定义 setArequestA,就像在示例中所做的那样。我选择在原型(prototype)上定义它们,因为它们在实例之间的行为是相同的。

关于javascript - 在该对象生成的 HTML 元素中引用 JS 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51225966/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com