javascript - Onclick 播放多个视频的 Jquery 触发器

Question

我正在尝试为每个视频创建触发器以使用 Jquery 在点击时播放，但是它只适用于我发现需要在 HTML 中应用标签数据组的方法。我正在通过 visual composer (wordpress) 创建这个触发器，我只能将自定义类和 ID 应用于每个视频，所以我不能使用当前方法

密码本 https://codepen.io/danielvianna/pen/jLBdYo

HTML

<div class="video_container">
<video class="video-ctrl" loop="" playsinline="" autoplay>
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/seating_handbrake.mp4" type="video/mp4">
  </video>
</div>

<div>
    <span class="truss_wizard" data-group="play">clickme1</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_wizard_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_handbrake.mp4" type="video/mp4">
    </video>
</div>

<div>
    <span class="projection_wizard" data-group="play">clickme2</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_handbrake.mp4">
    </video>
</div>

<div>
    <span class="pipe_drape_wizard" data-group="play">clickme3</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/Pipe-and-Drape_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/pipe_drape_handbrake.mp4" type="video/mp4">
    </video>
</div>

Jquery代码

//making it more dynamic with a data attribute
//  <span class="square" data-group="play2">clickme2</span>

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
    var $players1 = $('.truss_wizard');
    var $players2 = $('.projection_wizard');
    var $players3 = $('.pipe_drape_wizard');

    $players1.click(function() {
    //find all the playbutton elements
    $players1.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();
                    });
    $players2.click(function() {
    //find all the playbutton elements
    $players2.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
    $players3.click(function() {
    //find all the playbutton elements
    $players3.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
      }); 
     }); 
   }); 
});//function closes

CSS

.truss_wizard,.projection_wizard,.pipe_drape_wizard{
      height: 50px;
      width: 200px;
      display: block;
      background-color: #7ac810;
  font-size: 15;
}

span {
  font-color: yellow;
  font-size: 30px;
}

.video {
 margin-bottom: 100px;
}

注意:我正在使用一个包装器，因为我将它插入到 wordpress 中，并带有一个用 visual composer 构建的页面

Answer 1

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
  $(".play2").click(function() {
    //find all the play2 elements
    $(".play2")
      //get all their parent divs
      .closest('div')
      //find their nested videos
      .find('video')
        //play each of them
        .each(function(){ this.play(); });
  });
});

//making it more dynamic with a data attribute
//  <span class="square" data-group="play2">clickme2</span>

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
  var $players = $('.square');
  
  $players.click(function() {
    //find all the play2 elements
    $players.filter('[data-group="'+ $(this).data('group') +'"]')
      //get all their parent divs
      .closest('div')
      //find their nested videos
      .find('video')
        //play each of them
        .each(function(){ this.play(); });
  });
});