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]
    });

跨度（描述）的一个例子：

<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

假设描述（跨度）和您的视频选择（选择）将始终处于相同的顺序，并且具有相同数量的元素，您只需设置一个存储信息的数组或对象， 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()]);
});

jQuery .data（），需要接受数组元素作为键还是找到替代（JSON？）

2 个答案: