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

【问题标题】：Inner HTML if statement not recognizing a div tag内部 HTML if 语句无法识别 div 标签
【发布时间】：2012-06-11 17:35:42
【问题描述】：

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

我正在尝试创建一个与 JWplayer 交互的暂停/播放按钮（我也希望它与 flowplayer 交互，一旦我让按钮工作）并且图像将根据当前存在的图像而改变。我还有一个停止按钮，可以完全停止播放器并将暂停/播放按钮的图像更改为暂停。

这是我当前的代码：

<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() ) 但如果我再次点击暂停按钮，它不会变回播放图像。

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

【问题讨论】：

浏览器有时可以添加空格；您可能想在比较之前尝试 .trim()-ing html。

标签： javascript html onclick image innerhtml

【解决方案1】：

看起来您真正想要更改的只是 IMG 标签的 SRC，而不一定是整个 innerHTML。正如 machineghost 在他的评论中提到的那样，可能会添加空格或对完整 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;
}

【讨论】：

我将其更改为影响 obj.src（尝试将 image1 作为 img 标签的 id 或 div 标签），并且它的行为方式完全相同 - 它将播放按钮更改为暂停按钮，但是不会再回来了。
找到它，我正在试验并打印 .src，它返回整个 URL mysite.com/site/PLAY.png 而不仅仅是暂停/播放。感谢您提供有关 src 的提示！

【解决方案2】：

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

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

rgds.

【讨论】：

【解决方案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;
}

【讨论】：