开发者问题收集

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

2013-07-09
379
jquery toggle

我有一个图像按钮，我想切换它。但是，它在刷新时只切换一次。当我点击图像时，它应该变为第二张图片，下次点击时，又变回原始图片。通过此代码，我可以从第一张图片转到第二张图片，但再次点击时无法恢复原始图片。有人能指出我哪里做错了吗？这是我正在使用的整个脚本

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>
3个回答

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

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")
tymeJV
2013-07-09

首先，您应使用 .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");
                }
            });
Eric
2013-07-09

您应该处理 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() 方法。

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

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

glautrou
2013-07-09