Question

解决

 var player = 0;
 if(player == 0)
{
    document.getElementById("sp").src = "../image/start.png";
    player = 1;
}
else if(player == 1)
{
    document.getElementById("sp").src = "../image/stop.png";
    player = 0;
}

我试图在JavaScript中制作播放/暂停按钮第一个纯文本版本使用innerHtml正常工作，但我需要使用图像文件作为最终版本。

我的root目录中有3个文件夹：

image（图片文件所在的位置）
slide（php文件所在的位置）
javascript（放置js文件的地方）

在我的php文件中：

<img src="../image/stop.png" id="sp">
<script type="text/javascript" src="../javascript/page1.js"></script>

在我的js文件中：

if(document.getElementById("sp").src == "../image/stop.png") {
    document.getElementById("sp").src = "../image/start.png";
} else if(document.getElementById("sp").src == "../image/start.png") {
    document.getElementById("sp").src = "../image/stop.png";
}

我一直在寻找这种情绪，但我无法让它发挥作用。

文本verison的旧代码看起来像这样。

if(document.getElementById("sp").innerHTML == "Stop") {
    document.getElementById("sp").innerHTML = "Start";
} else if(document.getElementById("sp").innerHTML == "Start") {
    document.getElementById("sp").innerHTML = "Stop";
}

代码位于点击事件触发的功能

有人可以帮我解决这个问题吗？

这是whloe js代码。我知道这可能不适合写，但我对js来说是个新手

var CB = 
{
addEvent : function(element, event, action)
{
    if (element.addEventListener){
        element.addEventListener(event, action, false);
    }
    else
    {
        element.attachEvent("on" + event, action);
    }
}
 }

 Timer = function(callback, delay) 
 {
     var timerId, start, remaining = delay;
   this.pause = function() 
 {
  window.clearTimeout(timerId);
  remaining -= new Date() - start;
  };
  this.resume = function()
  {
  start = new Date();
  timerId = window.setTimeout(callback, remaining);
   };
   this.resume();
   };

  var synlig = 0.0;

  function visa(pic)
  {
synlig += 0.1;
if(synlig < 1.0)
{
    var x = String(synlig)
       pic.style.opacity = x;
}
else
{
     pic.style.opacity="1.0";
     return;
}
setTimeout(function(){visa(pic)}, 120);
   }

var     ejSynlig = 1.0
 function visaEJ(pic)
  {
ejSynlig -= 0.1;
if(ejSynlig > 0.0)
{
    var x = String(ejSynlig)
       pic.style.opacity = x;
}
else
{
     pic.style.opacity="0.0";
     return;
}
setTimeout(function(){visaEJ(pic)}, 120);
    }

  var   synlig2 = 0.0;
  function visa2(pic2)
  {
synlig2 += 0.1;
if(synlig2 < 1.0)
{
    var x = String(synlig2)
    pic2.style.opacity = x;
}
else
{
     pic2.style.opacity="1.0";
     return;
}
setTimeout(function(){visa2(pic2)}, 120);
    }

     var    ejSynlig2 = 1.0
     function visaEJ2(pic2)
    {
ejSynlig2 -= 0.1;
if(ejSynlig2 > 0.0)
{
    var x = String(ejSynlig2)
    pic2.style.opacity = x;
}
else
{
     pic2.style.opacity="0.0";
     return;
}
setTimeout(function(){visaEJ2(pic2)}, 120);
    }

  var pic = document.getElementById("bild");
   var t1s = new Timer(function(){visa(pic)}, 5000);
  var t1h = new Timer(function(){visaEJ(pic)}, 11000);
  var pic2 = document.getElementById("bild2");
 var t2s = new Timer(function(){visa2(pic2)}, 11500);
 var t2h = new Timer(function(){visaEJ2(pic2)}, 15000);

 function imgs()
 {
var p = document.getElementById("sp");
var x1, y1, x2, y2;

if(document.getElementById("sp").src == "../image/stop.png")
{
    x1 = t1s.pause();
    y1 = t1h.pause();
    x2 = t2s.pause();
    y2 = t2h.pause();
}   
else if(document.getElementById("sp").src == "../image/start.png")
{
    x1 = t1s.resume();
    y1 = t1h.resume();
    x2 = t2s.resume();
    y2 = t2h.resume();
}
CB.addEvent(p, "click", x1);
CB.addEvent(p, "click", y1);
CB.addEvent(p, "click", x2);
CB.addEvent(p, "click", y2);
 }

 function snd()
 {
var sndP = document.getElementById("sndP");
function playS()
{
    sndP.volume = 0.5;
    sndP.play();
} 
function pauseS()
{
    sndP.pause();
} 
var p = document.getElementById("sp");
var y;
if(document.getElementById("sp").src == "../image/stop.png")
{
    y = pauseS();
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    y = playS();
}
CB.addEvent(p, "click", y);
 }

 function theshit()
 {
imgs();
snd();
if(document.getElementById("sp").src == "../image/stop.png")
{
    document.getElementById("sp").src = "../image/start.png";
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    document.getElementById("sp").src = "../image/stop.png";
}
 }

 var sp = document.getElementById("sp");
 CB.addEvent(sp, "click", theshit);  
 sndP.volume = 0.5;
 sndP.play();

Answer 1

if(document.getElementById("sp").src == "../image/stop.png")
{
    document.getElementById("sp").setAttribute("src","../image/start.png");
}
else if(document.getElementById("sp").src == "../image/start.png")
{
    document.getElementById("sp").setAttribute("src","../image/stop.png");
}

Answer 2

所以你想在点击时切换图像？

如果您将某些内容设置为src然后获取它，则可能看起来有点不同。一个更好的解决方案，而不是检查某些东西是否有特定网址，您可以手动保存isPlaying变量。通过这种方式，您可以writeonly更快地访问DOM，然后一直手动读取src值。

var isPlaying = false;
var stopImg = "../images/stop.png";
var playImg = "../images/start.png";
var el = document.getElementById("sp");

$("button").click(function() {

    // toggle 
    el.src = isPlaying ? stopImg : playImg;
    // also toggle the var
    isPlaying = !isPlaying;

});

更好的方法是使用CSS，例如背景图像......

button {
    /*default state*/
    background-image : url('/images/play.png');
}

button.isPlaying {
    /*state when playing*/
    background-image : url('/images/stop.png');
}

然后在JS

$("button").click(function() {
    $(this).toggleClass("isPlaying");
});

if语句getElementById.src

2 个答案: