爲什麼這行腳本不工作？

當數據字被調用時，我想要顯示和播放聲音和圖像。我嘗試了許多不同的方式，但無法弄清楚。爲什麼這行腳本不工作？

這裏有一種方法......

for(i = 0; i < ul.children.length; ++i){ 

listOfWords[ul.children[i].getAttribute("data-word")] = ul.children[i].getAttribute("data-pic", "data audio"); 

} 
console.log(listOfWords);

我也試過......

for(i = 0; i < ul.children.length; ++i){ 

listOfWords[ul.children[i].getAttribute("data-word")] = ul.children[i].getAttribute("data-pic"); 
listOfWords[ul.children[i].getAttribute("data-word")] = ul.children[i].getAttribute("data-audio"); 


} 
console.log(listOfWords);

但沒有這樣的運氣。

第二種方法做底部而不是頂部，當數據字被調用時，我需要數據音頻和數據pic。

任何人都可以幫忙嗎？

HTML ...

<ul style="display:none;" id="wordlist"> 
    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/04/13/00/06/head-31117_640.png"></li> 
    <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/05/03/23/13/cat-46676_640.png"></li> 
    <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/05/02/21/14/gray-46364_640.png"></li> 
    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/04/16/12/17/black-35741_640.png"></li> 
    <li data-word="log" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/04/13/11/18/fire-31929_640.png"></li> 
    <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://pixabay.com/static/uploads/photo/2012/04/13/00/05/old-31110_640.png"></li>

來源

2012-07-26 m0onio

你的代碼中沒有jQuery。你想用jQuery的答案嗎？ – jrummell 2012-07-26 14:16:07

是的請@jrummell – m0onio 2012-07-26 14:17:49

一旦你完成它，我想看你的文字遊戲：-D – Christoph 2012-07-26 14:18:34

事情是這樣的：

for(i = 0; i < ul.children.length; ++i){ 
    listOfWords[ul.children[i].getAttribute("data-word")] = { 
     "pic" : ul.children[i].getAttribute("data-pic"), 
     "audio" : ul.children[i].getAttribute("data-audio") 
    }; 
}

然後在listOfWords對象的給定項目，你可以這樣做：

var currentWord = "cat"; // set current word key somehow, then: 
console.log(listOfWords[currentWord].pic); 
console.log(listOfWords[currentWord].audio);

用jQuery：

var listOfWords = {}; 
$("#wordlist li").each(function() { 
    var $item = $(this); 
    listOfWords[ $item.attr("data-word") ] = { 
     pic : $item.attr("data-pic"), 
     audio : $item.attr("data-audio") 
    }; 
});

來源

2012-07-26 14:21:26 nnnnnn

它沒有工作，因爲你沒有做我說的檢索'pic'和'你只需要複製放入值的部分。當你想要與'rndWord'關聯的音頻時，你需要說'listOfWords [rndWord] .audio'，同樣的，圖片將會是' listOfWords [rndWord] .pic'。 http://jsfiddle.net/bEYJH/7/ – nnnnnn 2012-07-26 14:32:36

使用jQuery，您可以使用.each()遍歷列表項和.data()檢索數據屬性值。

var listOfWords = []; 
$("#wordlist li").each(function(index, item) { 
    // where liData is { word: "a", audio: "b", pic: "c" } 
    var liData = $(item).data(); 
    listOfWords[liData.word] = liData; 

    console.log("word: " + liData.word + ", audio: " + liData.audio + ", pic: " + liData.pic); 
});

來源

2012-07-26 14:22:41 jrummell

爲什麼這行腳本不工作？

回答

相關問題