Question

在这个网站testsite，我正在为ESL学生制作一个数字游戏。它使用闪存和html5音频播放器取决于浏览器（某些原因的插件使用flash for firefox，但这并不重要）。有16个音轨。 flash播放器div是＃f-ONE，＃f-TWO等，而html5是＃ONE，＃TWO等。

所有音频播放器都隐藏在页面加载上，然后（使用此小提琴中的工作代码http://jsfiddle.net/andrewwhitaker/9BcUP/）当您单击开始按钮时，选择16个数组中的一个数字并将其分配给变量{ {1}}然后添加ran如果是闪存则添加#f-或添加#如果html5然后其中一个音频播放器应该显示。 ran.show():但它不起作用。

为了进行调试，我输入了一些console.log（运行），它显示选择了数组中的随机元素，然后添加了div＃，但由于某些原因，音频播放器没有显示。

你能帮我弄明白为什么吗？

Answer 1

我注意到你的标记是：

<audio controls="" autobuffer="" id="SIX" class="html5audio">
    <source src="http://eslangel.com/wp-content/uploads/2011/07/six.mp3" type="audio/mpeg">
    <object type="application/x-shockwave-flash" name="f-SIX" style="outline-style: none; outline-width: initial; outline-color: initial; visibility: visible; " data="http://eslangel.com/wp-content/plugins/degradable-html5-audio-and-video/incl/player.swf" width="290" height="24" id="f-SIX"><param name="wmode" value="opaque"><param name="menu" value="false"><param name="flashvars" value="initialvolume=80&amp;soundFile=http://eslangel.com/wp-content/uploads/2011/07/six.mp3&amp;playerID=f-SIX"></object>
    <script type="text/javascript">AudioPlayer.embed("f-SIX", {soundFile: "http://eslangel.com/wp-content/uploads/2011/07/six.mp3"});</script>
</audio>

注意，id='f-SIX'元素元素id='SIX'。这意味着当您使用id="NUM"隐藏元素时，也会隐藏带有id='F-NUM'的元素。显示内部元素不会导致它显示，因为隐藏了父元素（至少这似乎是Google Chrome的情况）

此外，您必须考虑仅显示id='f-SIX'元素的浏览器。出现这种情况是因为某些浏览器尚不支持audio标记，因此只显示object标记。

我会按如下方式更改您的JavaScript：

$(".start").click(function() { var ran = getRandom(myArray, true); if ($('#ONE').length) { ran = $('#' + ran); ran.show(); } else { ran = $('#f-' + ran); ran.css('display', 'block'); } });

另请注意使用display:block代替.show()。造成这种情况的唯一原因是因为我无法让object代码与.show()很好地对待（对此有任何建议）。

对于任何阅读的人，请阅读整个chat transcript以了解我是如何得出这个答案的。

jQuery：代码工作小提琴不在网站上工作

1 个答案: