0

谁能向我解释一下下面这段 jQuery 中可能发生的事情？

        var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });
        tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);
        tileDiv.data(this);

对我来说，它看起来像是tileDiv设置为一个 jQuery 对象，其中包含两个值 -<div/>以及逗号后面的第二位。但是，不能 100% 确定通话发生了什么tileDiv.data(this)。感谢您的澄清或最佳猜测。

4

4 回答 4

1

代码div使用第二个参数中传递的属性创建一个新对象，并将 jQuery 对象存储在tileDiv：

var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });

然后添加border-topCSS 属性：

tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);

至于最后一行，该.data函数允许您存储和检索与该 jQuery 对象关联的数据。它还可用于从data-元素的 HTML5 属性中检索信息。在这种情况下， 的所有成员都this将存储在tileDiv的数据中。如果你有：

this.someData = 99;
this.otherData = 87;
tileDiv.data(this);

然后tileDiv.data('someData')将返回 99tileDiv.data('otherData')并将返回 87，如您在此 jsFiddle中所见。

请参阅.data此处的 jQuery 文档：.datajQuery API。

于 2012-04-11T16:14:39.640 回答
1

Data 是一个将元数据存储在 DOM 对象中的 JQuery 命令：http: //api.jquery.com/data/ 数据可以是您喜欢的任何内容。您添加这样的数据：

tileDiv.data(key, object_with_data)

并像这样检索它：

var tileDiv.data(key);

所以，是的，看起来上面检索数据但没有做任何事情。

于 2012-04-11T16:15:47.720 回答
1

data是 HTML 属性的 HTML 5 前缀。如果我们知道this在您的上下文中是一个基本字符串，例如“hello”，jQuery 会尝试获取一个名为 .html 的属性 HTML 属性data-hello。但是正如您所看到的，您的对象没有任何类似的属性，所以什么都没有发生。

它等于写

 $(titleDiv).attr("data-" + this)
于 2012-04-11T16:19:54.703 回答
1

第一行创建一个新的 div，设置id和class属性，然后设置 div 的内部文本。

第二行设置顶部边框样式。

第三行将数据附加到等于this对象所有属性的新 div 中，我猜这是通过new Something构造函数创建的 Javascript 对象，尽管它也可以是普通对象。

所以 if ，在第三行执行后this.answer = 42的结果也将是 42 。tileDiv.data("answer")

复制 的所有属性似乎有点浪费，this最好这样说tileDiv.data("tileInfo", this)，但如果不看更多代码就很难说。

于 2012-04-11T16:22:10.670 回答