次のような状況があります。
フォームには、クラス "formFieldLabel" 内にシステム生成フィールドがあります (これは、from ジェネレーターで生成されたフォームです)。これはラベル タグを使用していないため、スクリーン リーダーに適していません。私の目標は、基本的にテーマを設定し、このシステムによって生成されるフォームをよりアクセスしやすくすることです。したがって、このスクリプトでの私の試みは...
1) フォームをループし、.formFieldLabel の内容を配列 "labelArray" にコピーします。
2) この後、input タグの隣の label タグ内に適切な配列値を貼り付けます。
3) 最後に、.formFielLabel クラスを削除します。これはまだ完了していませんが、この部分は簡単に実行できます。
// HTML example for one part of the multiple fields
<div class="formField">
<table>
<tr>
<td class="formFieldLabel" >First Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
<td class="formFieldLabel" style="padding-left: 5px">Last Name<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
</tr>
<tr>
<td ><input type="text" class="l6e formFieldText formFieldMediumLeft" id="form_0004_fld_2_fn" name="First Name" value=""></td>
<td style="padding-left: 5px"><input type="text" class="l6e formFieldText formFieldMediumRight" id="form_0004_fld_2_ln" name="Last Name" value=""></td>
</tr>
<tr><td> </td></tr>
<tr>
<td class="formFieldLabel">Email Address<b style="color: #FF0000; cursor: default" title="Required Field">*</b></td>
</tr>
<tr>
<td colspan="2"><input type="Email" class="l6e formFieldText formFieldLarge" id="form_0004_fld_2_em" name="E-mail" value=""></td>
</tr>
</table>
</div>
これを行うためにこれまでに作成したスクリプトを次に示します。問題は、入力ごとにループ全体が実行されるため、各入力の横に FirstNameLastNameEmail などが表示されることです。ここで概念的に間違った方向に進んでいるように感じます。
// jQuery
var label = $(".formFieldLabel");
var labelArray = [];
for(var i=0;i < label.length; i++) {
var arrValue = label[i].innerHTML;
labelArray.push(arrValue);
insertLabel = $("<label>").append(labelArray[i]).append("</label>");
$(".formFieldText").before(insertLabel);
};
JSFiddle: http://jsfiddle.net/qGgwT/
ここで誰かが私を正しい方向に向けることができますか?