從隱藏的哈希在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);
});

編輯：

i和elem是什么？

我的方法是使用jQuery的內置迭代函數each （ http://api.jquery.com/jQuery.each/ ）。 該實用程序功能使程序員可以輕松地迭代現有集合，包括對象，數組和jQuery選擇。 這是函數的簽名（由於缺少更好的用語），如jQuery文檔所示：

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

您可以在任何可迭代的JavaScript對象（例如foo.each(...); ）上調用each對象，盡管在調用之前先看到jQuery選擇更為常見。 each函數each希望您向其傳遞一個回調函數，該函數接受兩個參數：索引/鍵參數和值/項目參數（作為一個副注，您還可以訪問this ，它引用值/項目的隱式參數）回調的主體。

each都會對集合中的每個項目調用一次此函數，並根據迭代中的當前項目自動為您傳遞適當的索引/鍵和值參數。 jQuery選擇是可迭代的類似於數組的對象：它們的行為類似於JavaScript數組，並且它們的“項目”可以使用數字索引來引用（例如，調用$('div')[0]或$('div').get(0)將返回對與div選擇器匹配的第一個DOM元素的引用（如果頁面上存在div）。

當我們遍歷jQuery選擇時，所遍歷的“項”是對DOM元素的引用。 在我的例子，當我打電話each上一個jQuery選擇，並為其提供一個回調函數， 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對象？

以及console.log（哈希）;

我只包含了console.log() ，讓您瀏覽生成的哈希列表。 不需要調用tokenInput 。

Answer 2

您提供的源代碼不是哈希，而是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);
});

我不確定一旦擁有哈希后您將如何處理哈希，但這應該可以幫助您入門。