这是我在点击图像时播放Youtube视频的代码。。
HTML
<div id="my-video" style="display:none;">
<div class="responsive-video">
<iframe src="http://www.youtube.com/embed/kCfP003Btjw?rel=0&hd=1&autoplay=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="feature-img">
<img src="http://yalleshleiron.com/ds/wp-content/uploads/2013/08/HP.jpg" class="featimg attachment-full wp-post-image" alt="HP">
<a class="video-play-button" href="#" id="imageID"></a>
jQuery
<script type="text/javascript">
(function( $ ) {
$(document).ready( function( ) {
$(\'#imageID\').click(function() {
$(\'#my-video\').show();
$(\'#imageID\').hide();
$(\'.featimg\').hide();
});
});
})(jQuery);
</script>
我尝试在循环中使用它，但如果单击一个图像，它会播放循环中的所有视频。
这是代码
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(\'clearfix\'); ?> role="article">
<header>
<div class="feature-img">
<?php
if(get_field(\'youtube_id\'))
{ ?>
<div id="my-video" style="display:none;">
<div class="responsive-video">
<iframe src="http://www.youtube.com/embed/<?php echo get_field(\'youtube_id\'); ?>?rel=0&hd=1&autoplay=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<?php the_post_thumbnail(\'full\', array(\'class\' => \'featimg\')); ?><a class="video-play-button" href="#" id="imageID"></a>
<?php } else { ?>
<?php the_post_thumbnail(\'full\', array(\'class\' => \'featimg\')); ?>
<?php } ?>
</div>
<div class="gallery-header">
<h3 class="single-title" itemprop="headline"><?php the_title(); ?></h3>
</div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<?php the_content(); ?>
</section> <!-- end article section -->
<?php endwhile; ?>
</article>
我希望它是动态的，但我不知道怎么做。如有任何建议，将不胜感激，谢谢。
最合适的回答,由SO网友:gmazzap 整理而成
问题在于：
<div id="my-video" style="display:none;">
正如您所看到的，id是静态的，对于所有帖子都是相同的。首先，这不符合html标准：标记id必须是唯一的。
如果您在jquery中使用id选择器，并且多次使用该id，那么jquery应用函数会产生副作用。。。
因此，首先必须使id唯一，在循环中使用：
<div id="my-video-<?php the_ID(); ?>" class="my-video-container" style="display:none;">
出于同样的原因，请更改播放按钮的代码（您完全可以删除imageID）：
<a class="video-play-button" href="#"></a>
并将jquery更改为：
$(\'.video-play-button\').click(function() {
$(this).closest(\'.feature-img\').find(\'.my-video-container\').show();
$(this).siblings(\'.featimg\').hide();
$(this).hide();
});
