Question

我在点击并显示language_arrow_bottom之后尝试隐藏language_arrow_up，然后反过来。

我在下面的代码中找不到错误？我知道在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();
    });
});

Answer 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

Answer 2

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

Answer 3

我不知道，但我认为您可能需要在功能结束时添加return false;次来电。其他代码看起来不错

Answer 4

选中此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>

Answer 5

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

Answer 6

另一个小提琴：

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

Answer 7

更改代码以设置显示＆＃34;无＆＃34;为＆＃34; a＆＃34;而不是img，因为图像在标签内，并且您正在显示和隐藏基于＆＃34; a＆＃34;标识。

<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 个答案: