多次更改 onclick(） 函数(播放/暂停图像更改）

Change onclick() function multiple times (play/pause image change)

本文关键字：暂停 图像 播放 函数 onclick      更新时间：2023-09-26
<audio>
    <source src="data/music/track1.mp3" type="audio/mpeg">
    Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
    <img id="play_pause" src="data/play_button.png" onclick "changePlayPauseButton()">
</button>
<audio>
    <source src="data/music/track2.mp3" type="audio/mpeg">
    Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
    <img id="play_pause_two" src="data/play_button.png" onclick "changePlayPauseButtonTwo()">
</button>
<audio>
    <source src="data/music/track3.mp3" type="audio/mpeg">
    Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
    <img id="play_pause_three" src="data/play_button.png" onclick "changePlayPauseButtonThree()">
</button>
<script>
    var play_pause = "pause_button.png";
    function changePlayPauseButton() {
        if (play_pause == "pause_button.png") {
            document.images["play_pause"].src = "data/pause_button.png";
            document.images["play_pause"].alt = "pause";
            play_pause = "play_button.png";
        } else {
            document.images["play_pause"].src = "data/play_button.png";
            document.images["play_pause"].alt = "play";
            play_pause = "pause_button.png";
        }
    }
    var play_pause_two = "pause_button.png";
    function changePlayPauseButtonTwo() {
        if (play_pause_two == "pause_button.png") {
            document.images["play_pause_two"].src = "data/pause_button.png";
            document.images["play_pause_two"].alt = "pause";
            play_pause_two = "play_button.png";
        } else {
            document.images["play_pause_two"].src = "data/play_button.png";
            document.images["play_pause_two"].alt = "play";
            play_pause_two = "pause_button.png";
        }
    }
    var play_pause_three = "pause_button.png";
    function changePlayPauseButtonThree() {
        if (play_pause_three == "pause_button.png") {
            document.images["play_pause_three"].src = "data/pause_button.png";
            document.images["play_pause_three"].alt = "pause";
            play_pause_three = "play_button.png";
        } else {
            document.images["play_pause_three"].src = "data/play_button.png";
            document.images["play_pause_three"].alt = "play";
            play_pause_three = "pause_button.png";
        }
    }
</script>

我创建了一个播放列表，它只显示按钮播放/暂停。我还自定义了按钮，以便单击时图像自动更改。问题是我有几个按钮！我喜欢做的是，不仅在单击时更改按钮本身的图像，而且在处于播放模式时更改另一个按钮的图像(暂停图像(以返回到播放模式(播放图像(

对我放轻松，伙计们我一个月前刚开始编码！谢谢

好吧，我不确定这是否是您需要的，但请看一下示例：

http://jsfiddle.net/j6nbcpL9/

.js：

 $(document).ready(function(){
        $('button').on('click', function(){
           var option = $(this).attr('data-btn');
            console.log(option);
            if(option === 'changePlayPauseButtonThree'){
                changePlayPauseButtonThree();
                ...
            }
            if(option === 'changePlayPauseButtonTwo'){
                changePlayPauseButtonTwo();
                ...
            }
            if(option === 'changePlayPauseButton'){
                changePlayPauseButton();
                ...
            }
        });
    });

另外，让我知道是否不是正确实施它所需要的。代码不是最好的，但我希望它有所帮助。

相关文章：