0

我正在尝试从隐藏的哈希创建一个关联数组。下面的 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>
4

2 回答 2

3

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

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

在功能上等同于

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

tokenInput这与（请参阅http://loopj.com/jquery-tokeninput/#installation--setup ）所期望的参数类型不匹配（您在第一个代码示例中似乎有正确的想法）。为什么不遍历 jQueryinput选择，将新的哈希对象推送到列表中，最后调用 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);
});

编辑：

i 和 elem 是什么？

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

jQuery.each（集合，回调（indexInArray，valueOfElement））

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

each将为集合中的每个项目调用一次此函数，并根据迭代中的当前项目自动为您传递适当的索引/键和值参数。jQuery 选择是可迭代的类数组对象：它们的行为类似于 JavaScript 数组，并且可以使用数字索引来引用它们的“项目”（例如，$('div')[0]如果div 存在于页）。$('div').get(0)div

当我们迭代一个 jQuery 选择时，我们迭代的“项目”是对 DOM 元素的引用。在我的示例中，当我调用eachjQuery 选择并为其提供回调函数时，i会在选择中给出当前 DOM 元素索引的值，同时elem引用实际元素。通常我们想在回调函数内部对这些元素调用 jQuery 方法。这要求我们将元素包装为 jQuery 对象 ( $(elem))，允许我们使用 jQuery 的所有功能来操作元素。

按照惯例，调用eachjQuery 选择遵循以下形式：

$('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 对象：

什么是 console.log(hashes);

我只是简单地包含了一个console.log()让您探索生成的哈希列表。没有必要调用tokenInput。

于 2013-10-11T03:28:55.680 回答
1

您作为源提供的不是哈希值，而是 HTML 输入标签。如果要从中提取值，可以使用jquery 的attrfunction。

$(function(){
  var tokens = $('.stores').map(function(index, el) {
     var element = $(el)
     return {
       id: element.attr('id'),
       name: element.attr('value')
     }
  })
  $("#tokens").tokenInput(tokens);
});

我不确定你在拥有哈希后要对它们做什么，但这应该让你开始。

于 2013-10-11T03:28:14.993 回答