2

私の投稿をチェックしていただきありがとうございます。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>
4

2 に答える 2

2

あなたはこのようにそれを行うことができます：

d = {}
$.each(keys, function(index, key) {
  d[key] = clips[index]
})
$('body').data(d)
于 2013-03-14T01:23:34.183 に答える
1

assuming that the descriptions(the spans), and your video selection (the select) will always be in the same order, and have the same number of elements, you can just set an array or object that stores the information via the videoID:

//set descriptions
var videoDescriptions = {};
$(".xfactor span").each(function(index) {
  videoDescriptions[$('#videoSelection option').eq(index).text()] = $(this).html();
});

then for the onchange event:

$("#videoSelection").change(function() {
  //append the video description using the list we made.
  $("#open").empty().append(videoDescriptions[$(this).val()]);
});
于 2013-03-14T02:08:48.137 に答える