1

「ボール」という名前のオブジェクトを 1 つ作成します。ドキュメントの読み込み後、スクリプトはオブジェクトの 12 個のインスタンスを作成し、非常に多くの要素を挿入します。

<ul></ul>

私の目的は、ボールをクリックすると、ボールのインデックスが表示されることです。例: No 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

ユーザーがクリックした要素をキャプチャする必要があります。つまり、出力する 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 に答える
0

コンマが足りないので_thisグローバルです。

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

グローバルであるため、最後に作成されたボールの値を取得しています。

ソリューション：

不足しているコンマを追加します。

于 2012-10-22T14:25:31.970 に答える