javascript - YouTube图像叠加层-Javascript不执行两个元素

Question

我实际上是在尝试将图像叠加到YouTube视频上，然后单击该图像以播放YouTube视频。

我的Javascript出现问题，因为我不能调用相同的ID。我越来越束缚它，所以任何帮助将不胜感激。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<div style="width:423px; height:336px;">

<div id="ytapiplayer2" style="display:none;">
<object width="423" height="336"><param name="movie" value="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="423" height="336"></embed></object></p>
</div>
<p><img src="http://placekitten.com/500/200" id="imageID" /><br />

</div>

<div style="width:423px; height:336px;">

<div id="ytapiplayer2" style="display:none;">
<object width="423" height="336"><param name="movie" value="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="423" height="336"></embed></object></p>
</div>
<p><img src="http://placekitten.com/500/199" id="imageID" /><br />

</div>

  </body>

  <script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>

</html>

Answer 1

这应该工作:

HTML:

<div style="width:423px; height:336px;" id="test">

    <div class="ytapiplayer2" style="display:none;">
        <object width="423" height="336">
            <param name="movie"             value="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1">
            </param>
            <param name="allowFullScreen" value="true">
            </param><param name="allowscriptaccess" value="always">
            </param>
            <embed src="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="423" height="336"></embed></object>
</div>
<img src="http://placekitten.com/500/200" class="imageID" /><br />

</div>

<div style="width:423px; height:336px;">

<div class="ytapiplayer2" style="display:none;">
<object width="423" height="336"><param name="movie" value="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/cbP2N1BQdYc&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="423" height="336"></embed></object>
</div>
<img src="http://placekitten.com/500/199" class="imageID" /><br />

</div>

jQuery的:

$(document).ready(function() {
    $('.imageID').click(function() {
        $(this).closest('div').find('.ytapiplayer2').show();
        $(this).hide();
    });
});