YouTube图像覆盖-Javascript不针对两个元素执行

我实际上是试图在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>

$（'#imageID'）。单击（函数（）{
$（'ytapiplayer2'）.show（）；
$（'#imageID'）.hide（）；
});

这应该可以：

HTML:

---

对于DOM元素，ID应该是唯一的。如果需要将类应用于多个元素，请使用该类。你想要一个解决方案，而不是一个类吗？嗨，莫里亚蒂，是的，那将是惊人的，可能会更好一点。谢谢这太神奇了-非常感谢莫里亚蒂！很抱歉回到这里，我遇到了一个问题，为了让jquery.min.js行正常工作，我必须输入两次jquery.min.js行，这真的很奇怪。我以前没有看到过？可能是因为页面在执行脚本之前没有加载。编辑了答案。如果问题仍然存在，请提供更多信息。这完成了工作。我认为在头文件中调用了一些沉重的外部.JS文件，这是导致问题的原因。谢谢你！

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

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