JavaScriptにて表記を簡易化したい

Question

$('.sampleA').addClass('sampleB');
$('.sampleC').addClass('sampleD');
$('.sampleE').addClass('sampleF');
$('.sampleG').addClass('sampleH');
・
・
・

上記のようなコードを書いていますが、配列などを利用してより簡単に記載できないでしょうか。
※便宜上ABC～で名前を付けていますが、実際のクラス名は特に共通性はなく、その場合でも実装できるようにしたいです。

Answer 1

jQueryらしくやるなら

var list=[
  ['.sampleA','sampleB'],
  ['.sampleC','sampleD'],
  ['.sampleE','sampleF'],
  ['.sampleG','sampleH'],
  ];
$(function(){
  $.each(list,function(){
    $($(this).get(0)).addClass($(this).get(1));
  });
});

Comments

[auyaa]

ありがとうございます。

Answer 2

配列にしてもそんなに簡潔にならない気がしますが、可能ではあります。

const CLASS_CHANGES =
  [['.sampleA', '+sampleB'], ['.sampleC', '+sampleD'],
   ['.sampleE', '+sampleF'], ['.sampleG', '+sampleH'],
   ...];

CLASS_CHANGES.forEach(pair => {
  if (pair[1].startsWith('-'))
    $(pair[0]).removeClass(pair[1].substring(1));
  else if (pair[1].startsWith('+'))
    $(pair[0]).addClass(pair[1].substring(1));
  else
    $(pair[0]).addClass(pair[1]);
});

ついでにremoveClass()する機能も付けてみました。関数化すると便利かもしれません。

Comments

[auyaa]

removeClassもありがとうございます！使えるところがあれば使ってみます。

Answer 3

追加したいクラス名と、追加先のクラス名をセットにしたオブジェクトの配列を持たせる形でどうでしょうか。

const classDic = [{ to: 'sampleA', add: 'sampleB' }, ...];
classDic.forEach((d) => {
  $(`.${d.to}`).addClass(d.add);
});

Comments

[auyaa]

ありがとうございます！
やりたかったのそれです。助かりました……！