Question

我目前有一个随机的单词列表，这些单词的声音与每个单词相关联。我也希望链接一张图片，但是当我尝试按照与声音相同的方式进行操作时。

<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>

Answer 1

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

Answer 2

您忘记添加属性...

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

希望这有帮助

将图像添加到单词列表

2 个答案: