Question

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

<ul></ul>

我的目的是当点击球时，它显示球的指数。例如：点击No 3 ball，它显示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)
    }
});

Answer 1

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

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

因为它是全局的，所以你得到了最后一个Ball的值。

解决方案：

添加缺少的逗号。

Answer 2

您需要捕获用户点击的元素。这意味着您需要在输出的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)});
}

};

注意我评论过的行以及我附加到您的球员的html的点击事件功能。

详细了解事件和事件传播here

为什么警报功能不显示每个的索引

2 个答案: