Onclick play複数の動画のJqueryトリガー

Question

Jqueryを使用してクリックして再生する各動画のトリガーを作成しようとしていますが、HTMLでタグデータグループを適用する必要があります。 HTML https://codepen.io/danielvianna/pen/jLBdYo

Codepen

を

を私は視覚的な作曲（ワードプレス）を介してこのトリガーを作成していると私は、各ビデオにカスタムクラスとIDを適用することができますので、私は、現在のメソッドを使用することはできません

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

注：私は視覚的な作曲家で構築されたページでワードプレスでこれを入れていますので、ラッパーを使用しています

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(); }); 
 
    }); 
 
});