Question

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

我创建了一种只显示按钮的播放列表播放/暂停。我还自定义了按钮，以便在单击时图像自动更改。问题是我有几个按钮！我喜欢做的是，不仅可以在点击时更改按钮本身的图像，还可以在播放模式（暂停图像）中更改其他按钮以返回播放模式（播放图像）

对我们说好话我刚刚开始编码一个月前！感谢

Answer 1

嗯，我不确定你是否需要这个例子：

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

另外，请告诉我您是否需要正确实施它。代码不是最好的，但我希望它有所帮助。

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

1 个答案: