1

我创建了一个名为“Ball”的对象。文档加载后，脚本将创建 12 个对象实例并插入这么多元素 li

<ul></ul>

我的目的是当点击球时，它显示球的索引。例如：单击第 3 个球，它显示 3。但是当我单击每个球时，它总是显示 12。

抱歉，我无法上传 html 文档的快照，因为我是这里的新人。

function Ball(idx, parent, libra) {
    this.idx = idx;
    this.parent = parent;
    this.libra = libra;
    this.init();
}

Ball.r = 30;

Ball.prototype = {
    init: function() {
        var _html = $("<li><div class='ball'><span>" + this.idx + "</span></div></li>"),
        pos
        _this = this;
        this.parent.append(_html);
        this.html = _html.find(".ball");
        this.html.css({
            height: Ball.r * 2 + "px",
            width: Ball.r * 2 + "px",
            lineHeight: Ball.r * 2 + "px"
        });
        pos = this.html.position()
        this.html.css({
            left: pos.left + "px",
            top: pos.top + "px",
            position: "absolute"
         });
         this.html.mousedown(function() {alert(_this.idx)});
    }
};


$("document").ready(function() {
    var parent = $("#balls ul"),
    libra = 1;
    for (var i = 1; i < 13; i++) {
        new Ball(i, parent, libra)
    }
});
4

2 回答 2

0

您缺少逗号，因此_this是全局的。

    var _html = $("<li><div class='ball'><span>" + this.idx + "</span></div></li>"),
    pos  <--- missing comma here
    _this = this;

由于它是全局的，因此您将获得最后一个 Ball 创建的值。

解决方案：

添加缺少的逗号。

于 2012-10-22T14:25:31.970 回答
0

您需要捕获用户单击的元素。这意味着您需要在输出的 Ball html 上监听点击事件。您的 Ball 对象应如下所示：

Ball.prototype = {
init: function() {
    var _html = $("<li><div class='ball'><span>" + this.idx + "</span></div></li>"),
    pos;
    _this = this;
    this.parent.append(_html);
    this.html = _html.find(".ball");
    this.html.css({
        height: Ball.r * 2 + "px",
        width: Ball.r * 2 + "px",
        lineHeight: Ball.r * 2 + "px"
    });
    pos = this.html.position()
    this.html.css({
        left: pos.left + "px",
        top: pos.top + "px",
        position: "absolute"
     });

     $(_html).on("click", function(e) {
         alert(e.currentTarget.textContent);
     });

     //this.html.mousedown(function() {alert(_this.idx)});
}

};

请注意我注释的行和我附加到您的 Ball li 的 html 的单击事件函数。

在此处阅读有关事件和事件传播的更多信息

于 2012-10-22T14:37:48.013 回答