Question

我在IE，Chrome和Firefox中测试了以下代码，但它们不适用于任何代码。我已经阅读了几个关于类似问题的问题，但他们没有提供解决我的例子的解决方案。

我正在尝试创建一个与JWplayer接口的暂停/播放按钮（我也想让它与流动播放器连接，一旦我按下按钮），图像将根据当前的图像而改变。我还有一个停止按钮，完全停止播放器并更改暂停/播放按钮的图像以暂停。

这是我目前的代码：

<script type="text/javascript">
function changeimg()
{
  var obj = document.getElementById('image1');
  var imgtag1 = '<img src=\'PLAY.png\'>';
  var imgtag2 = '<img src=\'PAUSE.png\'>';
  if(obj.innerHTML == imgtag2)
  {obj.innerHTML = imgtag1;}
  else
  {obj.innerHTML = imgtag2;}
  return;
}

function playimg()
{
  document.getElementById('image1').innerHTML = '<img src=\'PLAY.png\'>';
  return;
}

</script>

<div id="image1" href="#" onclick="changeimg(); jwplayer('mediaspace1').play(); jwplayer('mediaspace2').play(); jwplayer('mediaspace3').play(); jwplayer('mediaspace4').play();"><img src='PLAY.png'></div>
<div href="#" onclick="playimg(); jwplayer('mediaspace1').stop(); jwplayer('mediaspace2').stop(); jwplayer('mediaspace3').stop(); jwplayer('mediaspace4').stop();"><img src='STOP.png'></div>

播放/暂停功能正常工作，并且第一个div将变为暂停img（因此javascript正在经历），如果我点击第二个div（停止功能 - 触发playimg（），它将更改回播放）但如果再次点击暂停按钮，它将不会变回播放图像。

出于安全原因，我无法链接该网站，但任何帮助将不胜感激

Answer 1

看起来你真正想要改变的是IMG标签的SRC，而不一定是整个innerHTML。正如机器人在评论中提到的那样，可能会添加空格或对完整HTML进行其他更改，这可能会使您的比较结果为假。

但是，您可以检查obj.src ==“PLAY.png”是否直接设置SRC属性。像这样：

function changeimg()
{
  var obj = document.getElementById('image1');
  var img1 = 'PLAY.png';
  var img2 = 'PAUSE.png';
  if(obj.src == img2)
  {obj.src = img1;}
  else
  {obj.src = img2;}
  return;
}

Answer 2

我认为你在changeimg()中替换的innerhtml正在影响整个obj元素，它是一个div。因此，if(obj.innerHTML == imgtag2)将返回false，因为div innerhtml不是imgtag2，但是下次您要调用changeimg()时，“obj”将是未定义的，因为您将其innerhtml替换为没有ID的HTML代码：{obj.innerHTML = imgtag2;}

检查控制台，看看是否有任何javascript错误，应该是if(obj.innerHTML == imgtag2)

RGDS。

Answer 3

只需检查PLAY是否存在，然后根据它更改innerHTML

function changeimg()
{
    var obj = document.getElementById('image1');
    var imgtag1 = '<img src=\'PLAY.png\'>';
    var imgtag2 = '<img src=\'PAUSE.png\'>';
    if(obj.innerHTML.indexOf('PLAY') != -1)
    {obj.innerHTML = imgtag2;}
    else
    {obj.innerHTML = imgtag1;}
    return;
}

内部HTML if语句无法识别div标签

3 个答案: