Javascript 为什么这行脚本不起作用?
当数据字被调用时,我想要一个声音和一个图像来显示和播放。我试过很多不同的方法,但都不明白 这里有一个方法Javascript 为什么这行脚本不起作用?,javascript,jquery,Javascript,Jquery,当数据字被调用时,我想要一个声音和一个图像来显示和播放。我试过很多不同的方法,但都不明白 这里有一个方法 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
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
我也试过
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);
for(i=0;i
但没有这样的运气
第二种方法是底部而不是顶部,当调用数据字时,我需要数据音频和数据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>
类似这样的内容:
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")
};
}
使用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")
};
});
使用jQuery,您可以使用来迭代列表项并检索数据属性值
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);
});
代码中没有jQuery。你想用jQuery获得答案吗?我想在你完成文字游戏后看看:-DIt不起作用,因为你没有按照我说的从
listowords
中检索pic
和audio
值,你只复制了将值放入其中的部分。当您想要与rndWord
关联的音频时,您需要说listOfWords[rndWord].audio
,同样,pic将是listOfWords[rndWord].pic
。
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);
});