0

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

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>
4

3 回答 3

2

您的条件语句有点错误，您实际上是在检查中分配了一个源，更改以下行：

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-09T12:53:38.417 回答
0

您应该处理 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 类以显示不同的图像）。

于 2013-07-09T13:02:18.730 回答
0

首先，您应该使用.attr()for attributes和.prop()for properties。然后你需要比较输出，而不是像你当前尝试的那样设置它。看看这个：

$('#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-09T12:55:04.687 回答