如何使用 jQuery .each() 获取数据属性

Question

我在一个有几个人的作品集上工作。每个人都有一个演示，点击此人应该会转到视频。

我的问题是 returns 每个人的视频 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() 获取数据属性

How to get data attribute with jQuery .each()

javascript

jquery

custom-data-attribute