JavaScriptでクラス変更しても処理が変更されない

Question

●状況
ブラウザ上にボタンAがあります。（text:編集、クラス:edit）
クラスeditだと処理Xを、クラスupdateだと処理Yを行うJavaScript Clickイベントを設定しています。

ボタンAを押下すると処理Xを行い、ボタンAの表示を［編集］から［更新］に変更してクラスもeditからupdateに変更します。

次にボタンAを押下すると処理Yを実行したいのですが、処理Xが実行されてしまいます。ブラウザデバックしてもクラスは変更されています。

それらしい原因、対策がわかるかたアドバイスお願いいたします。

画面にデータが100件あるとするとボタンAも100個あります。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

Answer 1

同じイベントハンドラで処理するならmaisumkunさんのいう通りclassで判断。

実装するにはわかりやすさも大事なので自分なら

• ボタンを2個配置しておいて一つはclass edit もうひとつはupdate
• edit表示中はupdateはdisplay:none;
• update表示中はeditはdisplay:none;
• それぞれにclickイベントを登録

ってやるかな

っていうかボタン100個とか情報小出しかよっ！っていう笑

Answer 2

クラスeditだと処理Xを、クラスupdateだと処理Yを行うJavaScript Clickイベントを設定しています。

イベントの与え方によっては、イベントをセットする時点でのクラスをみて判断することとなってしまうので、後からクラスだけ切り替えてもイベントはそのままになります。

なので、イベントハンドラの中でクラスをチェックして処理を切り分ける、というのが適当かもしれません。