重新映射按钮到div中的javascript

Question

我发现了一个非常有用的指南，用froogaloop解释了基本的vimeo控制器。

我对JavaScript的理解非常有限，需要一些帮助将控制器按钮重新映射到div。

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 

<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

<button>Play</button> 
<button>Pause</button> 

<div class="play">Play</div> <!-- I want to use this div instead of buttons --> 

<script> 

$(function() { 
    var iframe = $('#player1')[0]; 
    var player = $f(iframe); 

    // When the player is ready, add listeners for pause, finish. 
    player.addEvent('ready', function() { 
     status.text('ready'); 

     player.addEvent('pause', onPause); 
     player.addEvent('finish', onFinish); 
    }); 

    // Call the API when a button is pressed 
    $('button').bind('click', function() { 
     player.api($(this).text().toLowerCase()); 
    }); 
}); 

</script> 

的codepen我已经提到： https://codepen.io/bdougherty/pen/JgDfm

谢谢！

Answer 1

老实说，我根据按钮的innerhtml调用某些东西会导致一个奇怪的决定。它会让代码混淆，只要设计师决定让箭头比玩游戏更好就会中断。

但对于你的问题我会这样去：

$(function() { 
 
    var iframe = $('#player1')[0]; 
 
    var player = $f(iframe); 
 

 
    // When the player is ready, add listeners for pause, finish. 
 
    player.addEvent('ready', function() { 
 
    status.text('ready'); 
 

 
    player.addEvent('pause', onPause); 
 
    player.addEvent('finish', onFinish); 
 
    }); 
 

 
    // Call the API when a button is pressed 
 
    $('.play').bind('click', function() { 
 
    player.api('play'); 
 
    }); 
 
    $('.pause').bind('click', function() { 
 
    player.api('pause'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
 

 
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 

 
<div class="play">Play</div> 
 
<!-- I want to use this div instead of buttons --> 
 
<div class="pause">Pause</div>