DOM操作の簡略化：
Nodeセットの中の1つだけにclassを設定(tag指定)
指定したHTMLタグを配列として、その中の一つだけに特定のclassを設定する。択一のラジオボタンのような動き。
String1
設定するclassを文字列で渡す
String2
処理対象とするHTMLタグを文字列で渡す
Number
classを設定する要素番号を指定 マイナス値を指定した場合はどれにも設定しない
Node
指定Node内に絞って検索する id値を文字列で指定してもよい
●必須引数 ●オプション引数(省略可能)
記述例
$setClassSomeTag('here', 'div', 2)
$setClassSomeTag('usethis', 'li', -1, 'item_list')
動作サンプル
クリックしたひとつに class="usethis" を設定する。
HTML :
<div>
<button type="button" class="usethis" onclick="$setClassSomeTag('usethis','button',0,'sample1')">SAMPLE1 – Item0</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',1,'sample1')">SAMPLE1 – Item1</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',2,'sample1')">SAMPLE1 – Item2</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',3,'sample1')">SAMPLE1 – Item3</button>
</div>
Javascript :
$setClassSomeTag('usethis','button',0,'sample1');
上段の3個はNode指定をして『SAMPLE2A』の3個の中で択一としている。
下段の3個はNode指定を省略しているので、このページ内の全ての<button>の中で択一という動作になる。
HTML :
<div id="sample2A">
<button type="button" onclick="$setClassSomeTag('usethis','button',0,'sample2A')">SAMPLE2A – Item0</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',1,'sample2A')">SAMPLE2A – Item1</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',2,'sample2A')">SAMPLE2A – Item2</button>
</div>
<div id="sample2B">
<button type="button" onclick="$setClassSomeTag('usethis','button',7)">SAMPLE2B – Item0</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',8)">SAMPLE2B – Item1</button>
<button type="button" onclick="$setClassSomeTag('usethis','button',9)">SAMPLE2B – Item2</button>
</div>
Javascript :
$setClassSomeTag('usethis','button',0,'sample2A');
$setClassSomeTag('usethis','button',7);
$setClassSomeTag('usethis','button',-1); //リセット
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。