Question

我有一个图像按钮，我试图切换。但是，它只在刷新时切换一次。当我单击图像时，它应该更改为第二张图片，然后在下一次单击时，更改回原始图片。通过这段代码，我可以从第一张图片到第二张图片，但是当我再次点击时，我无法获得原始图片。有人能指出我哪里错了吗？这是我正在使用的整个脚本

HTML＆amp; 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>

Answer 1

您的条件陈述有点不对，您实际上是在支票中指定了一个来源，更改了这些行：

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")

Answer 2

首先，您应将.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");
                }
            });

Answer 3

您应该处理CSS类，而不是检查和更改图像URL。例如，当您单击图像时，将检查是否切换了此图像。

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); }

修改

用
替换JavaScript函数的内容
$(this).toggleClass('toggle');

结果将完全相同，但正如@Eric所提到的，使用toggleClass()方法要好得多。

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

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

图像切换按钮仅起作用一次

3 个答案: