Onclick爲多個視頻播放Jquery觸發器

Question

我想爲每個使用Jquery的點擊播放創建一個觸發器，但它只能用於我找到的方法，需要將標籤數據組應用到HTML中。我創建通過視覺作曲家（WordPress的），這觸發我只能申請一個自定義類和ID以每個視頻，所以我不能用目前的方法

Codepen 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與視覺作曲家建立了一個頁面中插入該

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