制作可在点击时切换图像的 JS 按钮答案

【问题标题】：Making JS buttons that toggle their image on click制作可在点击时切换图像的 JS 按钮
【发布时间】：2012-03-23 17:12:17
【问题描述】：

我正在做这样的事情-

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop

但我想用单击时切换到另一个图像的图像替换按钮。换句话说，播放按钮将变为暂停按钮。

有很多教程展示了如何只使用一个按钮来完成此操作，但是一旦我添加更多按钮，新按钮就不起作用了。

任何帮助表示赞赏！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>


<script type="text/javascript">

function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;

var x = theImg.split("/");
var t = x.length-1;
var y = x[t];

if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}



}

</script>

<a href="#" onclick="changeIt()"><img src='btnPause.gif' name='PlayOrPause' border='0' /></a>

【问题讨论】：

您能否发布一些您现有的尝试让我们帮助您改进？ SO 不是为了让人们为你做你的工作，但当你真正陷入困境时，我们一定很乐意为你提供帮助。
在图片上使用 onClick 功能。
我用我的一次尝试更新了我的帖子。我之前没有包含这个，因为我知道有很多方法可以实现这种效果，我不知道哪种方法最好。上面的例子有效，但只有一个按钮。如果我想要几个按钮，一次只有一个可以工作。这就是我的问题所在。

标签： javascript button toggle

【解决方案1】：

使用输入类型图像试试这个

HTML

<input type="image" src="play.png" class="play" onclick="toggle(this);"/>

CSS

.play, .pause {width:100px;height:100px;}

function toggle(el){
    if(el.className!="pause")
    {
        el.src='pause.png';
        el.className="pause";
    }
    else if(el.className=="pause")
    {
        el.src='play.png';
        el.className="play";
    }

    return false;
}

小提琴是here。

【讨论】：

太棒了！现在，如果我真的想让按钮控制视频，我会在这里添加它吗？ onclick="toggle(this); "playPause()" />
抱歉，这应该在你的工具函数里面，比如jsfiddle.net/JPWCQ/4。
如果您遇到任何问题，请告诉我，您只询问了图像切换，所以当我回答问题时，我并没有想到视频的事情，但如果您需要更多帮助，请发表评论。谢谢！
视频效果很好，但我意识到我忘了指定一些东西。应该有两个不同的按钮，而不是同一个按钮的两个实例。我希望另一个是静音/取消静音按钮。我需要做一个额外的切换功能以及另外两个类吗？
“el”只是一个任意名称还是意味着什么？再次感谢您的帮助

【解决方案2】：

swap : function(id) {
    var e = document.getElementById(id);
    e.className = (e.className == 'image1') 
        ? 'image2' 
        : 'image1';        
}

您可以只创建一个检查当前类并切换它的函数。这是两个类具有不同背景图像的最简单示例。您可以在管理播放器的播放、暂停等“状态”的不同函数中处理其余逻辑。

【讨论】：