2

感谢您查看我的帖子。我正在为 Youtube 视频构建一个基于 jQuery 的选择器，并希望尽可能简化这个过程，因为我有很多要上传的内容。我想保持代码干燥，而不是在我的数据（）中重复 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

假设描述（跨度）和您的视频选择（选择）将始终处于相同的顺序，并且具有相同数量的元素，您可以设置一个数组或对象来通过 videoID 存储信息：

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

然后对于 onchange 事件：

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