单击事件后显示和隐藏图像答案

【问题标题】：Showing and hiding image after clicking event单击事件后显示和隐藏图像
【发布时间】：2013-09-11 12:08:41
【问题描述】：

我试图在单击并显示language_arrow_up 后隐藏language_arrow_bottom，然后反过来。

我在下面的代码中找不到错误？我知道在 jquery 中切换，但我现在不想使用它。

提前致谢

我正在加载http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

HTML

<a id="language_arrow_bottom" href="#nogo" title="Other languages‎"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close‎"  style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

JS

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

【问题讨论】：

你加载了jquery..??还要确保 ID 是唯一的..

标签： javascript jquery

【解决方案1】：

你需要默认隐藏language_arrow_up元素，而不是里面的图片

<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

演示：Fiddle

【讨论】：

@DipeshParmar 对不起，我没有得到...看起来图像正在正确切换
对不起我的错误。我实际上隐藏了一个标签而不是里面的图像。发布更新。

【解决方案2】：

我不知道，但我认为您可能需要在函数末尾添加 return false; 调用。其他代码看起来不错

【讨论】：

【解决方案3】：

查看Fiddle

只需使用 id 制作一个并执行与标签相同的过程

<div id="language_arrow_bottom">
    <a href="#nogo" title="Other languages"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
</div>

<div id="language_arrow_up" style="display:none;">
    <a  href="#nogo" title="Close"><img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/></a>
</div>

【讨论】：

【解决方案4】：

同意上面的阿伦。此外，此代码可能正在运行，但您使用的是相同的图像“web/images/bottom_arrow.jpg”，因此在视觉上它可能看起来不起作用。尝试在标签中使用单独的内容（或查看网络检查器）来验证代码是否正常工作。

【讨论】：

【解决方案5】：

另一个小提琴：

http://jsfiddle.net/8A8LS/1/

<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>

<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>

$('a').click(function () {
  $('a img').show();
  $(this).find('img').hide();
});

【讨论】：

【解决方案6】：

更改代码以将“a”而不是 img 设置为显示“None”，因为图像位于 a 标签内，并且您根据“a”id 显示和隐藏。

<a id="language_arrow_bottom" href="#nogo" title="Other languages">
  <img src="web/images/bottom_arrow.jpg"  width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
  <img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />

经过上述修改后，同样的js代码将在这里工作。

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

【讨论】：

【解决方案7】：

这是因为您在加载时隐藏了图像...您应该在 'a' 标签中使用 display none 而不是在 'img' 中

【讨论】：