0

私は現在、JavaScriptを使用してある種の「ボタン」を実装しようとしています。ユーザーが div をクリックすると、div の背景色が変わり、デバイス番号を一覧表示するポップアップが表示されます。この番号を使用して、後でクライアントをリダイレクトする予定です。しかし、現在、クリックイベントを登録できません。イベントが少しの間正しく機能していましたが、値は常に「i」の最終値でした。私の Web ページにも JQuery が含まれています。

これが JSFiddle と関連するコードです。 http://jsfiddle.net/G3ADG/9/

HTML 構造:

<div class="device" id="device1" value="1">
    <div class="device-name" id="deviceName1">Name1</div>
</div>
<div class="device" id="device2" value="2">
    <div class="device-name" id="deviceName2">Name2</div>
</div>
<div class="device" id="device3" value="3">
    <div class="device-name" id="deviceName3">Name3</div>
</div>

Javascript:

(function() {
    var devices = document.getElementsByClassName("device");
    for (var i = 0; i < devices.length; i++) {
        devices[i].addEventListener("click", function () {
            alert(i);
            this.style.backgroundColor = "#000000";
        })
    }
})();

任意のヘルプまたは入力をいただければ幸いです。

編集: ClassName 呼び出しを修正しました。ただし、返されるアラートはまだ間違っています。

4

3 に答える 3

2

このフィドルを確認してください：

イベントを添付するためのクロージャーが必要だった

(function () {
    var devices = document.getElementsByClassName("device");
    for (var i = 0; i < devices.length; i++) {
        (function (i) {
            devices[i].addEventListener("click", function () {
                alert(i);
                this.style.backgroundColor = "#000000";
            })
        })(i);
    }
})();
于 2013-06-21T20:34:53.187 に答える