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

Posted 2023-02-24

【中文标题】jQuery .data()，需要接受数组元素作为键或找到替代（JSON？）

【英文标题】：jQuery .data(), need to accept array elements as key or find alternative (JSON?)

【发布时间】：2013-03-02 04:53:27

【问题描述】：

感谢您查看我的帖子。我正在为 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>

【问题讨论】：

为什么要在正文中存储不同的 youtube ID？你不应该在实际的按钮/缩略图/等上这样做吗？每个视频都有吗？

我添加了我的选择标记以进行澄清，我实际上是在一个选项集中检测 YT ID，以动态更改当前正在播放的视频。

您将其放入 .data() 中是否有原因？按照您的操作方式，您可以只使用键/剪辑组合创建一个数组，而根本不会弄乱 .data()

老实说，我只使用 .data() 是因为它为我提供了初始功能。看到您对阵列的看法，我将非常感激。我目前正在尝试修复，但仍然没有太多运气。谢谢！

【参考方案1】：

你可以这样做：

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

【讨论】：

我试了一下，但我返回的是未定义的描述。

【参考方案2】：

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

//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()]);
);

【讨论】：

感谢您的耐心和帮助。当我在控制台中提醒 videoDescriptions 时，我返回空/未定义的值。关于为什么会发生这种情况的任何想法？

我添加了 span 示例以供参考。再次感谢。

在控制台上，我还在为 .each 函数提取左侧无效分配。

我刚刚注释掉了我的脚本并用你的脚本替换了它。它位于外部 .js 文件中。

@JasonAndrew 修复了它，我所做的唯一更改是 videoDescription 应该是一个对象，而不是设置为数组