JavaScriptを使用してボタングループのクラスを動的に変更する方法

1. getElementByIdを使用してボタン要素を取得し、classListプロパティを使用してクラスを変更する方法:

// HTML要素からボタンを取得
const button = document.getElementById('buttonId');
// クラスを追加
button.classList.add('newClass');
// クラスを削除
button.classList.remove('oldClass');
// クラスを切り替え
button.classList.toggle('activeClass');

2. querySelectorAllを使用して複数のボタン要素を取得し、forEachループを使用して各ボタンのクラスを変更する方法:

// HTML要素からボタンを取得
const buttons = document.querySelectorAll('.buttonClass');
// 各ボタンのクラスを変更
buttons.forEach(button => {
  button.classList.add('newClass');
  button.classList.remove('oldClass');
  button.classList.toggle('activeClass');
});

3. jQueryを使用してボタングループのクラスを変更する方法:

// HTML要素からボタンを取得し、クラスを変更
$('.buttonClass').addClass('newClass');
$('.buttonClass').removeClass('oldClass');
$('.buttonClass').toggleClass('activeClass');

これらは一般的な方法であり、ボタングループのクラスを動的に変更するための基本的な手法です。必要に応じてこれらのコード例をカスタマイズして使用してください。