私の投稿をチェックしていただきありがとうございます。Youtube ビデオ用の jQuery ベースのセレクターを作成しています。アップロードするものが多いため、プロセスをできるだけ合理化したいと考えています。コードを DRY に保ち、data() で Youtube ID を繰り返さないようにしたいと思います。
HTML ファイルには、Youtube の iframe 作成スクリプトと各ビデオの説明を個々のスパンに含め、これを eq() で反復処理して配列に割り当てます。私はYoutube ID番号を反復処理し、配列に配置してから、これらの配列要素を .data() で使用しようとしましたが、キーのみが文字列のみを受け入れます。配列オブジェクトをラップしようとしました。JSON 操作を試みますが、それが最も洗練されたソリューションになるかどうかはわかりません。
醜い .data() を最小化するか、関数から最初に受け取った ytKey 値を利用するにはどうすればよいですか?
//YT DESCriptor
$("#videoSelection").change(function() {
ytKey = $(this).val();
var clip = []
for( var i = 0; i < 12; i++) {
clip[i] = $('.xfactor span').eq(i).html();
}
var keys = []
for( var i = 0; i < 12; i++) {
keys[i] = $('#videoSelection option').eq(i).text();
}
$("body").data({
"i_uWYLyDFTo" : clip[0],
"EoVfXX1vjaY" : clip[1],
"vBx4WRsSvMU" : clip[2],
"XaWvQGC8zYU" : clip[3],
"EAR2zKEASfw" : clip[4],
"WYFgJd0w5-4" : clip[5],
"Td9TuR86BOE" : clip[6],
"g3yrh50fJnE" : clip[7],
"eRepVIXl9ps" : clip[8],
"CMfxvrf0DG4" : clip[9],
"SGcJftL3HZc" : clip[10],
"UwH6jrgRI4Y" : clip[11]
});
$("#open").empty();
description = ( $("body").data(ytKey) );
$("#open").append(description);
});
youtube API が選択可能にするセレクター マークアップを次に示します。
<div id="videoDiv">Loading...</div>
<div id="videoControls" class="desc">
<p>Select a video to load:</p>
<select id="videoSelection" onchange="loadVideo();">
<option value="i_uWYLyDFTo" selected>No One Wants You</option>
<option value="EoVfXX1vjaY">Hello Robot</option>
<option value="vBx4WRsSvMU">Raymore & Hannaghan</option>
<option value="XaWvQGC8zYU">The Return of Blood House Part II</option>
<option value="EAR2zKEASfw">'batin'</option>
<option value="WYFgJd0w5-4">Activities in Daily Living with Jimmy Callahan: Episode 1</option>
<option value="Td9TuR86BOE">Two Shot Shorts: The Movie</option>
<option value="g3yrh50fJnE">The Stand-off</option>
<option value="eRepVIXl9ps">Psych-Hick</option>
<option value="CMfxvrf0DG4">Hand Pop Body Swap</option>
<option value="SGcJftL3HZc">Fat Camp</option>
<option value="UwH6jrgRI4Y">The Hurting</option>
</select>
</div>
理想的には、.data() を次のように (展開して) 表示したいのですが、jQuery の API が原因でこれが単に不可能かどうかはわかりません。
$("body").data({
keys[0] : clip[0],
keys[1] : clip[1],
keys[2] : clip[2],
keys[3] : clip[3],
keys[4] : clip[4],
keys[5] : clip[5],
keys[6] : clip[6],
keys[7] : clip[7],
keys[8] : clip[8],
keys[9] : clip[9],
keys[10] : clip[10],
keys[11] : clip[11]
});
スパンの例 (説明):
<div class="xfactor">
<span>
Drunk-Noir (Our 1st Attempt)<br><br>
Directed by John Keefer<br>
Written by Dan D'Aprile, Chris Johnson, Dan Metzker, Sean Michael, John Keefer, Matt Poooooooooo-Ah, and Christine Wood<br>Edited by Chris Johnson<br><br>
(Originally Aired 5/13/07)
</span>
<span>
A man & his robot.<br><br>
Written & Directed by John Keefer<br>
Starring Dan Metzker<br>
Edited by Chris Johnson<br>
Music by Dan Metzker<br><br>
(Originally Aired 5/22/07)
</span>
</div>