JavaScriptでHTMLに設定したクラス名の判定

下のコードは、HTMLに設定しているクラス名（<div id=”content” class=”クラス名”>）を変えることによって、処理内容を変更するサンプルです。

設定したクラスを判定するのに使用したのが、hasClass。これで使用したクラスを判別して、その後の処理を変えています。

クラス名によって、

$(function() {
  $('#btn').on('click', function() {
    var parts = $('#content');
      if(parts.hasClass('parts1')) {
        $('#content').append('<p>' + 'parts1');
      } else if(parts.hasClass('parts2')) {
        $('#content').append('<p>' + 'parts2');
      }
    });
});

<button id="btn">ボタン</button>
<div id="content" class="parts2"></div>