jQuery .data()，需要接受数组元素作为键或寻找替代(JSON?)

Question

感谢您查看我的帖子。我正在为Youtube视频构建一个基于jquery的选择器，并希望尽可能地简化这个过程，因为我有很多要上传。我想保持代码DRY，不重复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]
    });

span (description)的示例:

<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>

Answer 1

你可以这样做:

d = {}
$.each(keys, function(index, key) {
  d[key] = clips[index]
})
$('body').data(d)

Answer 2

假设描述(span)和视频选择(select)总是按照相同的顺序，并且具有相同数量的元素，您可以通过videoID:

设置一个数组或对象来存储信息。

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

then for onchange事件:

$("#videoSelection").change(function() {
  //append the video description using the list we made.
  $("#open").empty().append(videoDescriptions[$(this).val()]);
});