0

スパンタグ付きの異なるIDを持つ5dtタグがあります。すべてのスパンタグには同じ画像があります。例えば：

各dtの下に保存アイコンがあります。ユーザーがそれをクリックすると、非保存アイコンに変わります。

今、私が最初のdtにいて、保存アイコンをクリックすると、それは完全に正常な非保存アイコンに変更されました.2番目のdtに移動して保存アイコンをクリックすると、非保存アイコンに変更されましたが、削除する必要があります最初のdtの非保存アイコンと、保存アイコンに変更します。

誰かが何か考えがありますか？

4

1 に答える 1

0

私はあなたのコードがどのように見えるかわかりませんが、多分以下があなたを助けるでしょう：HTML：

<table>
  <tr id="buttons">
    <td></td><td></td><td></td>
  </tr>
</table>

CSS：

.safe {
  background: url(../safe.jpg) no-repeat 0 0;
}
.non-safe {
  background: url(../unsafe.jpg) no-repeat 0 0;
}

JavaScript：

var buttons = document.getElementById("buttons").getElementsByTagName("td"),
    i = 0,
    len = buttons.length;

for ( ; i < len; i++) {
  buttons[i].addEventListener("click", function() {
    for (i = 0; i < len; i++) {
      var button = buttons[i];
      if (button === this) { this.className = "safe";
      } else { button.className = "non-safe"; }
    }
  }, false);
}

より高度なテクニックについては、「イベント委任」をグーグルで検索することもできます。

それぞれ1つのリスナーを追加するのではなく、td要素の共通の祖先要素にリスナーを追加します。

于 2012-08-16T21:43:37.443 に答える