图像切换按钮只能工作一次

我有一个图像按钮，我试图切换。但是，刷新时只切换一次。当我点击图片时，它应该改变到第二张图片，并在下一次点击时，改回到原始图片。通过此代码，我可以从第一张图片开始查看第二张图片，但是当我再次点击时，我无法获取原始图片。有人能指出我要去哪里吗？这是整个剧本，我现在用图像切换按钮只能工作一次

HTML &的jQuery -

<a href='#'> 
     <input type="image" src="/images/pulpit.jpg" id="btn-true" /> 
</a> 


<script type="text/javascript"> 
      $('#btn-true').click(function() { 
       if ($(this).prop("src", "/images/pulpit.jpg")) 
        $(this).prop("src", "smiley.gif"); 
       else if ($(this).prop("src", "smiley.gif")) 
        $(this).prop("src", "/images/pulpit.jpg"); 
      }); 
     </script>

来源

2013-07-09 TechnoBlahble

你无法使用.toggle（function .........？ –

上面这段代码在w3schools编辑器中工作正常，但是当我在.net mvc 4 web应用程序中使用相同的代码时，。任何原因，我可能会错过什么？ – TechnoBlahble

你的条件语句是有点不对，你实际上是在分配给您的支票的来源，改变线路：

if ($(this).prop("src", "/images/pulpit.jpg")) 
else if ($(this).prop("src", "smiley.gif"))

要：

if ($(this).prop("src") == "/images/pulpit.jpg") 
else if ($(this).prop("src") == "smiley.gif")

来源

2013-07-09 12:53:38 tymeJV

正如你指出的那样，我在条件中犯了一个错误，而且它应该是.attr而不是.prop谢谢！:) – TechnoBlahble

首先你应使用.attr()代替属性和.prop()代替属性。然后，您需要比较输出，而不是将其设置为您正在尝试的输出。看看这个：

$('#btn-true').click(function() { 
       if ($(this).attr("src") == "/images/pulpit.jpg") { 
        $(this).attr("src", "smiley.gif"); 
       } else if ($(this).attr("src") == "smiley.gif") { 
        $(this).attr("src", "/images/pulpit.jpg"); 
       } 
      });

来源

2013-07-09 12:55:04 Eric

这就像一个魅力！非常感谢！ – TechnoBlahble

这段代码在w3schools编辑器中工作正常，但是当我在.net mvc 4 web应用程序中使用相同的代码时，没有任何反应。任何原因，我可能会错过什么？ – TechnoBlahble

确保你首先包含了jQuery。然后检查控制台是否有错误。 – Eric

而不是检查和更改图像的URL你应该处理CSS类。例如，当你点击图像时，你检查这个图像是否被切换。

if ($(this).hasClass("toggle")) 
    $(this).removeClass("toggle"); 
else 
    $(this).addClass("toggle");

然后你在你的CSS中指定你的图像路径。

img { background-image:url(/images/pulpit.jpg); } 
img.toggle { background-image:url(smiley.gif); }

编辑：

更换你的内容通过

$(this).toggleClass('toggle');

JavaScript函数的结果将是完全一样的，但通过@Eric作为mentionned它是更好的使用toggleClass()方法。

每次点击图片时，“切换”CSS类将被添加，如果它尚未，否则它将被删除。

然后你可以在CSS中管理它（在你的情况下添加上面提到的两个CSS类来显示不同的图像）。

来源

2013-07-09 13:02:18 glautrou

聪明！ '$（this）.toggleClass（'toggle'）;'可能会更干净btw :-) – Eric

当然，感谢您发现这一点。 – glautrou

@glautrou - 你能否用一个例子来阐明你的想法？ – TechnoBlahble

图像切换按钮只能工作一次

回答

相关问题