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

Question

感谢您查看我的帖子。我正在为 Youtube 视频构建一个基于 jQuery 的选择器，并希望尽可能简化流程，因为我有很多要上传。我想保持代码干爽，不要在我的 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>

Answer 1

你可以这样做:

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