1

我目前有一个随机的单词列表，其中每个单词都有声音。我也想链接图片，但是当我尝试以与声音相同的方式进行操作时。

<ul style="display:none;" id="wordlist">
  <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://rlv.zcache.com/design_your_own_cartoon_cat_photosculpture-p153525514006078077bfpmd_400.jpg"></li>
  <li data-word="mat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav"></li>
  <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav"></li>
  <li data-word="fig" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav"></li>
  <li data-word="fog" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav"></li>
  <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav"></li>
</ul>

这是单击我的按钮时将其拉出的脚本...

var audio = $("#mysoundclip")[0];
$("button").click(function() {
var noExist = $('td[data-word=' + rndWord + ']').hasClass('wordglow2');
if (noExist) {
    $('#pickNext').click();
} else {
    $("#mysoundclip").attr('src', listOfWords[rndWord]);
    audio.play();
}
});

var pic = $("#mypic")[0];
$("button").click(function() {
var noExist = $('td[data-word=' + rndWord + ']').hasClass('wordglow2');
if (noExist) {
    $('#pickNext').click();
} else {
    $("#mypic").attr('src', listOfWords[rndWord]);
    pic.show();
}
});

所以音频的脚本有效，但图片无效......

<img id="mypic" preload="auto">
<audio id="mysoundclip" preload="auto"></audio>
4

2 回答 2

0

当你说这不起作用时，你是什么意思？您的 HTML 看起来有效（您已将图像的 url 存储在 LI 标记的标记中），您如何尝试使用该值，是否有一些 JavaScript 代码试图访问它？如果是这样，请向我们展示。

于 2012-07-26T08:00:36.303 回答
0

您忘记添加属性...

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

希望这可以帮助

于 2012-07-26T08:25:17.340 回答