Question

我在一个有少数人的投资组合上工作。每个人都有一个演示，点击该人应该导致视频。

我的问题是它为每个人返回相同的视频ID。

这是一个人容器（我有8个）。我删除了一些代码以保持必要。

<div class="personnecontainer">
  <h2 class="nompersonne">Nom</h2>
  <div class="demo<?php echo $i; ?> democontainer" role="button" data-videoid="<?php the_sub_field('demo'); ?>">
    <p class="vert titrelh60v2">Mon démo</p>
  </div>
</div>

我设法创建几乎可以工作的JavaScript代码。

<script>
jQuery( document ).ready(function() {
    jQuery('.democontainer').each(function(){
        jQuery(this).click(function() {

            jQuery('.socialcontainer').fadeOut('300');

            jQuery('.page-content').fadeOut(300, function() {
                var videoid = jQuery('.democontainer').data('videoid');

                var contenup1 = "<div class='js-video vimeo widescreen'><iframe id='video1' src='//player.vimeo.com/video/";
                var contenup2 = videoid;
                var contenup3 = "?color=009999&amp;title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video1' width='580' height='326' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>";
                jQuery('.page-content').html(contenup1+contenup2+contenup3).fadeIn(300);

            });
        });
    })
}); // Fin document ready
</script>

我应该修改什么，我的错误在哪里？

Answer 1

jQuery总是获取.democontainer集合中的第一个项目，你应该使用jQuery(this)来获取被点击的元素：

<script>
jQuery( document ).ready(function() {
    jQuery('.democontainer').each(function(){
        jQuery(this).click(function() {
            var videoid = jQuery(this).data('videoid');
            jQuery('.socialcontainer').fadeOut('300');
            jQuery('.page-content').fadeOut(300, function() {
                var contenup1 = "<div class='js-video vimeo widescreen'><iframe id='video1' src='//player.vimeo.com/video/";
                var contenup2 = videoid;
                var contenup3 = "?color=009999&amp;title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=video1' width='580' height='326' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>";
                jQuery('.page-content').html(contenup1+contenup2+contenup3).fadeIn(300);

            });
        });
    })
}); // Fin document ready
</script>

如何使用jQuery .each（）获取数据属性

1 个答案: