Question

我正在尝试创建一个可在播放和暂停图像之间切换的功能。以下是我的图片代码：

<img id="pause_tail" src="images/Pause.png" />&nbsp;
<img id="resume_tail" src="images/Play.png" />

这些由jQuery处理，以相应地调用开始/暂停尾部函数：

$("#pause_tail").click(
function(){
    pauseTail();
});

$("#resume_tail").click(
function(){
    startTail();
});

现在，一切正常，游戏和暂停是彼此相邻的。我想要做的只是一次只显示一个图像。例如，播放，当单击该图像时，图像将更改为暂停，反之亦然。什么是最好的方式来解决这个问题？谢谢！

Answer 1

使用某些元素的toggleClass并使用这些图像添加样式是不是更好？

像这样的http://jsfiddle.net/fEYC3/

Answer 2

你可以做到

<img id="pause_tail" src="images/Pause.png" />&nbsp;

$("#pause_tail").click( 
function(){

    var src = this.src;
    if(src.indexOf('Pause') === -1){
        //if there is no Pause in the src attribute currently is playing. 
        //Stop it and change image
        this.src = 'images/Pause.png';
        pauseTail();
     }else{
        //currently Paused, start it
        this.src = 'images/Play.png';
        startTail();
     }

});

Answer 3

在暂停中单击函数调用

Pause.hide（）和 Resume.show（）

Answer 4

这是这样的：

$("#pause_tail").click(
function(){
    pauseTail();
    $("#resume_tail").css({ 'display': 'display'});
    $("#pause_tail").css({ 'display': 'none'});
});

$("#resume_tail").click(
function(){
    startTail();
    $("#resume_tail").css({ 'display': 'none'});
    $("#pause_tail").css({ 'display': 'display'});
});

以下选项也有效..

Answer 5

我只想使用1 img标签并使用自定义属性“mode”来指定它当前所处的状态，如下所示：

<img id="play_pause" src="images/Play.png" mode="play" />

然后在你的jQuery中，基于模式，交换图像：

$("#play_pause").click(function(){

    var imgSrc = this.src;
    if(imgSrc.attr("mode") === "play"){
        this.src = 'images/Pause.png';
        pauseTail();
    }
    else{
        this.src = 'images/Play.png';
        startTail();
    }
});

Answer 6

根据我的经验，最好的方法是通过切换课程。这允许浏览器为两种状态（播放/暂停）预加载图像，以便在第一次加载第二图像时没有闪烁。这是一个例子：

<style>
    #pause { display: none; } // Set the pause button to be not shown
    .playing #play { display: none; } // Hide the play button when it starts playing
    .playing #pause { display: inline-block; } // Show the pause button when it starts playing
</style>
<script>
    $("#playPause").click(function(){
        // Do stuff when clicked
        $(this).toggleClass("playing"); // Toggle the playing class on/off
    });
</script>
<div id="playPause" class="play>
    <img src="play.png" id="play">
    <img src="pause.png" id="pause">
</div>

如何更改图像src onclick？播放/暂停

6 个答案: