あるクラス属性のすべての値のうち、いくつかだけを交互に入れ変えたい

Question

前提

HTMLのあるボタンのclass属性にA, B, C の値をつけるとします

<button class="A B C"></button>

これを次のように、B, C の2つだけをそれぞれX, Y に変えたいです

<button class="A X Y"></button>

そして、もう一度押したら、もとに戻したいです

課題

そこで、次のように書きましたが、どうも期待通りになりません...

(object).classList.toggle('B', 'C');
(object).classList.toggle('X', 'Y');

ほかに、className も使いましたが、期待は実現いたしませんでした...

ご意見、ヒント、参考情報をお寄せくださいませ

よろしくお願いいたします

Comments

[itagagaki]

toggleってそんな使い方できます？

[退会済みユーザー]

おそらく、使い方がまちがっているんですよね...

Answer 1

<button class="A B C">btn</button>
<script>
document.querySelector('.A').addEventListener('click',e=>{
  ['B','C','X','Y'].forEach(x=>e.target.classList.toggle(x));
});
</script>

Answer 2

toggleはそういう使い方はできません。やるならreplaceでは？

【DOMTokenList.toggle() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList/toggle

【DOMTokenList.replace() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/DOMTokenList/replace

Comments

[退会済みユーザー]

ご回答をありがとうございます。質問に内容が足りていませんでした。そのボタンを押すたびに、交互に切り替えたいと思って、toggleを使いました。

たとえば、(A, B, C) のときに押したら (A, X, Y) に、そして (A, X, Y) の時に押したら (A. B, C) に変えようとしています

replaceを試してみます