DOM操作の簡略化：

Nodeセットの中の1つだけにclassを設定(class指定)

指定したclassを持つNodeを配列として、その中の一つだけに特定のclassを設定する。択一のラジオボタンのような動き。

String1
設定するclassを文字列で渡す
String2
処理対象とするclassを文字列で渡す
Number
classを設定する要素番号を指定 マイナス値を指定した場合はどれにも設定しない
Node
指定Node内に絞って検索する id値を文字列で指定してもよい
●必須引数 ●オプション引数(省略可能)

記述例

$setClassSomeone('here', 'locations', 2)
$setClassSomeone('usethis', 'radio_item', -1, 'years')

動作サンプル

クリックしたひとつに class="usethis" を設定する。Node指定は省略。

  • SAMPLE1 – Item0
  • SAMPLE1 – Item1
  • SAMPLE1 – Item2
  • SAMPLE1 – Item3
HTML : <ul> <li class="sample1_item usethis" onclick="$setClassSomeone('usethis','sample1_item',0)">SAMPLE1 – Item0</li> <li class="sample1_item" onclick="$setClassSomeone('usethis','sample1_item',1)">SAMPLE1 – Item1</li> <li class="sample1_item" onclick="$setClassSomeone('usethis','sample1_item',2)">SAMPLE1 – Item2</li> <li class="sample1_item" onclick="$setClassSomeone('usethis','sample1_item',3)">SAMPLE1 – Item3</li> </ul>
Javascript : $setClassSomeone('usethis','sample1_item',0);

上段の3個はNode指定をして『SAMPLE2A』の3個の中で択一としている。
下段の3個はNode指定を省略しているので『SAMPLE2』の6個の中で択一という動作になる。

  • SAMPLE2A – Item0
  • SAMPLE2A – Item1
  • SAMPLE2A – Item2
  • SAMPLE2B – Item0
  • SAMPLE2B – Item1
  • SAMPLE2B – Item2
  • リセット
HTML : <ul id="sample2A"> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',0,'sample2A')">SAMPLE2A – Item0</li> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',1,'sample2A')">SAMPLE2A – Item1</li> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',2,'sample2A')">SAMPLE2A – Item2</li> </ul> <ul id="sample2B"> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',3)">SAMPLE2B – Item0</li> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',4)">SAMPLE2B – Item1</li> <li class="sample2_item" onclick="$setClassSomeone('usethis','sample2_item',5)">SAMPLE2B – Item2</li> </ul>
Javascript : $setClassSomeone('usethis','sample2_item',0,'sample2A'); $setClassSomeone('usethis','sample2_item',3); $setClassSomeone('usethis','sample2_item',-1); //リセット
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。