【jQuery】ボタンの挙動をクラス名を使って分岐させる【318日目】

書き方いくつか

書き方いくつか用意しました。
お好みの方をどうぞ。

こんなコードがありました。

$('.ClickA').click(function () {
  //クラス名を変える
  $('.ClickA').addClass('ClickA').removeClass('ClickB');

  //イベントをつけ直す
  $('.ClickB').unbind();
  $('.ClickB').click(function () {
    alart('Bだよ！');
  });
});

クリックすると、クラス名を変えて、イベントをつけ直すものです。

わざわざunbindしてるので、誤って他のイベントも消す可能性もあります。
以下の方法がよりスッキリしてるかもです。

クラス名の分岐にする

$(document).on('click', '.ClickA', function () {
    //クラス名を変える
    $('.ClickA').addClass('ClickA').removeClass('ClickB');
});

$(document).on('click', '.ClickB', function () {
    alart('Bだよ！');
});

同じ内容の別の書き方。

$('.ClickA').live('click', function () {
    //クラス名を変える
    $('.ClickA').addClass('ClickA').removeClass('ClickB');
});

$('.ClickB').live('click', function () {
    alart('Bだよ！');
});

何をやってるの

on('click', '.class_name', func)で、対象のクラス名に対してイベントを付与します。

こっちの方が見やすいですね！