我正在尝试从隐藏的哈希创建一个关联数组。下面的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>
您当前的代码调用 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);
});
编辑:
什么是 I 和 Elem?
我的方法是使用jQuery的内置迭代器函数each
(http://api.jquery.com/jQuery.each/(。此实用程序函数允许程序员轻松迭代现有集合,包括对象、数组和 jQuery 选择。以下是函数的签名(因为缺乏更好的术语(,如jQuery的文档所示:
jQuery.each( collection, callback(indexInArray, valueOfElement( (
你可以在任何可迭代的JavaScript对象(例如-foo.each(...);
(上调用each
,尽管在调用之前看到jQuery选择更常见。 each
希望您向它传递一个回调函数,该函数接受两个参数:索引/键参数和值/项参数(作为旁注,您还可以访问回调正文内的this
,一个引用值/项的隐式参数(。
each
将为集合中的每个项调用此函数一次,并根据迭代中的当前项自动为其传递适当的索引/键和值参数。 jQuery选择是可迭代的类似数组的对象:它们的行为类似于JavaScript数组,它们的"items"可以使用数字索引引用(例如 - 调用$('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
- 什么是jQuery对象?
控制台.log(哈希(是什么;
我只是简单地包含一个console.log()
,让您浏览生成的哈希列表。没有必要调用tokenInput
。
您作为源提供的不是哈希值,而是 HTML 输入标签。如果你想从中提取值,你可以使用 jquery 的 attr
函数。
$(function(){
var tokens = $('.stores').map(function(index, el) {
var element = $(el)
return {
id: element.attr('id'),
name: element.attr('value')
}
})
$("#tokens").tokenInput(tokens);
});
我不确定一旦你有了哈希,你想用它们做什么,但这应该让你开始。