javascript - 在 jquery 中从隐藏哈希值创建关联数组

Question

我正在尝试从隐藏哈希创建关联数组。下面的 jquery 调用特定的哈希值，但我想用一个代码动态创建它。

$(document).ready(function() {
     $("#tokens").tokenInput([
         {id: 1, name: "Darren Criss"},
         {id: 2, name: "Ann Arbor T-shirt Company"},
         {id: 3, name: "StarKid Product Store"},
     ]);
 });

我尝试这样做:

 $(document).ready(function() {
     var variable = $("input[type='hidden'][class='stores']").val();
      $("#tokens").tokenInput(variable);
 });

但它不起作用。

这是哈希值

  <input id="1" class="stores" type="hidden" value="Darren Criss" taxonomies_count="9"  
 name="1" disabled="disabled"></input>

 <input id="2" class="stores" type="hidden" value="Ann Arbor T-shirt Company" 
 taxonomies_count="46" name="2" disabled="disabled"></input>

 <input id="3" class="stores" type="hidden" value="StarKid Productions Store" 
 taxonomies_count="22" name="3" disabled="disabled"></input>

Answer 1

您当前的代码调用 tokenInput，但仅向其传递一个字符串(DOM 中遇到的第一个 input 元素的值。假设这些哈希值存在于document 加载时的 DOM，

  var val = $("input[type='hidden'][class='stores']").val();
  $("#tokens").tokenInput(val);

功能上等同于

$("#tokens").tokenInput("Darren Criss");

这与 tokenInput 期望的参数类型不匹配(请参阅 http://loopj.com/jquery-tokeninput/#installation--setup )(您在第一个代码示例中似乎有正确的想法)。为什么不迭代 jQuery input 选择，将新的哈希对象插入列表，最后调用 tokenInput，将完整列表传递给它:

$(document).ready(function() {
    var hashes = [];
    $('input.stores').each(function(i, elem) {
        hashes.push({
            'id': $(elem).attr('id'),
            'name': $(elem).val(),
        });
    });
    console.log(hashes);
    //$('#tokens').tokenInput(hashes);
});

编辑:

what is the i and the elem?

我的方法是使用 jQuery 的内置迭代器函数 each ( http://api.jquery.com/jQuery.each/ )。这个实用函数允许程序员轻松地迭代现有集合，包括对象、数组和 jQuery 选择。这是函数的签名(由于缺乏更好的术语)，如 jQuery 文档中所示:

jQuery.each(集合，回调(indexInArray，valueOfElement))

您可以在任何可迭代的 JavaScript 对象上调用 each(例如 - foo.each(...);)，尽管更常见的是看到 jQuery 选择在通话之前。 each 希望您向其传递一个回调函数，该函数接受两个参数:索引/键参数和值/项目参数(作为旁注，您还可以访问 this，引用回调体内的值/项的隐式参数。

each 将为集合中的每个项目调用此函数一次，并根据迭代中的当前项目自动为其传递适当的索引/键和值参数。 jQuery 选择是可迭代的类似数组对象:它们行为类似于 JavaScript 数组，并且可以使用数字索引引用它们的“项目”(例如 — 调用 $(' div')[0] 或 $('div').get(0) 将返回对与 div 选择器匹配的第一个 DOM 元素的引用，如果页面上存在一个 div)。

当我们迭代 jQuery 选择时，我们迭代的“项目”是对 DOM 元素的引用。在我的示例中，当我在 jQuery 选择上调用 each 并为其提供回调函数时，i 会被赋予选择中当前 DOM 元素索引的值，而elem 引用实际元素。通常我们希望在回调函数内对这些元素调用 jQuery 方法。这要求我们将元素包装为 jQuery 对象 ($(elem))，从而允许我们使用 jQuery 的所有功能来操作该元素。

按照惯例，在 jQuery 选择上调用 each 遵循以下形式:

$('your selector here').each(function(i,elem) {
    var foo = $(elem); //Allows us to treat the DOM element as a jQuery object
    //Do stuff ... foo.val().attr().css().toggle();
});

有关 jQuery 对象的进一步阅读:

• http://www.elijahmanor.com/2013/02/jquery-object-quacks-like-array-duck.html
• What is a jQuery Object?

and what does console.log(hashes);

我只是添加了一个 console.log() 来让您探索生成的哈希列表。调用tokenInput不是必需的。