jQuery隐藏和显示Attr Src图像不按预期切换

所以我搜索了周围并编辑了我找到的显示/隐藏jquery代码，它工作得很好，除非在点击它时html img属性不会被替换。jQuery隐藏和显示Attr Src图像不按预期切换

我的jQuery代码：

<script> 
$(document).ready(function() { 

    var button = $('#hideButton'); 

    //check the cookie when the page loads 
    if ($.cookie('currentToggle') === 'hidden') { 
     togglePanel(button, false); 
    } 
    else { 
     togglePanel(button, true); 
    } 

    //handle the clicking of the show/hide toggle button 
    button.click(function() { 
     //toggle the panel as required, base on current state 
     if (button.attr('src') === "images/expand.gif") { 
      togglePanel($(this), true); 
     } 
     else { 
      togglePanel($(this), false); 
     } 
    }); 

}); 

function togglePanel(button, show) { 

    var panel = $('#panel'); 

    if (show) { 
     panel.removeClass('hidden'); 
     button.attr('src','images/collapse.gif'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.attr('src','images/expand.gif'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
} 
</script>

我的HTML代码：

<a id="hideButton" href="#"><img src="images/collapse.gif"></a> 
<div id="panel"> 
    <p> 
    Test 
    </p> 
</div>

当我看着我的萤火控制台，它显示了A HREF src属性改变，像这样 “<a ... src="extend.gif">”，而不是实际的“<img src="">”元素本身。我该如何解决？谢谢。

来源

2013-10-08 Momololo

你这样做了艰辛的道路。 UI元素应该使用CSS背景，而不是内嵌图像。然后你可以简单地通过交换CSS类名来改变图像。 –

正如我之前所说，并且会再说一遍，不要只是复制和粘贴别人的代码。即使你编辑它，你也不会明白他想要实现什么。研究代码并写下你需要的元素。 – nkmol

感谢提示Diodeus，我会这样做。 – Momololo

使您的功能正常工作 - 您需要将其更改为更新IMG元素的src属性。没有锚标记......你能做到这一点，像这样：

function togglePanel(button, show) { 

    var panel = $('#panel'); 

    if (show) { 
     panel.removeClass('hidden'); 
     button.find('img').attr('src','images/collapse.gif'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.find('img').attr('src','images/expand.gif'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
}

的.find（“IMG”）将返回子对象的参数选择匹配 - 为你调用它的元素.. 。在这种情况下，锚点标签存储在您的可变按钮...

我想要注意的几件事：交换src属性可能是有效的，但你会注意到一个“闪烁”在较慢的互联网连接或作为图像尺寸变大。这是因为您实际上正在让用户发出请求并加载该图像。

推荐的方法是做到这一点像Diodeus说 - 利用CSS类和我更倾向于将图像精灵 - 这将否定“闪蒸”，并尽量减少资源的加载时间的DOM完成加载后。

编辑：

RafH有一个好点！ - 你还必须更新if条件（我忽略）来检查图像源 - 而不是锚源。他建议

来源

2013-10-08 20:40:21 Joe

感谢提示乔。我已经得到了CSS的工作，尽管最初的崩溃图像消失与CSS背景。所以我会先试着弄清楚，如果它能正常工作，那么我只需要使用CSS。 – Momololo

按钮指的是一个标签，如果你想改变IMG SRC，那么你需要使用正确的选择：

$('img',button).attr('src', 'whatever.gif');

在您的代码：

if (button.attr('src') === "images/expand.gif") {

应是：

if ($('img', button).attr('src') === "images/expand.gif") {

您还需要在togglePanel函数中执行同样的操作。

来源

2013-10-08 20:40:36 RafH

RafH好点！ - 他还必须更新if条件以检查图像源 - 而不是锚点源 – Joe

对不起，如果我没有正确理解你的问题。当点击锚时，您想要显示/隐藏面板，点击时也会改变图像。

为什么不为锚本身做一个布局并使用后台url来改变它？

#hideButton 
{ 
    width: 25px; 
    height: 25px; 
    display: inline-block; 

    background: url('http://png.findicons.com/files/icons/2338/reflection/128/collapse_arrow.png'); 
    background-size:25px 25px; 
} 

.reverse 
{ 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    transform: scaleY(-1); 

    //you can place a other image in here. 

    margin-bottom: 2px; 
}

现在我已经在点击时使用了镜像图片，你可以使用任何你想要的图片。

现在jQuery代码：

$(document).ready(function() { 
    $("#hideButton").click(function() 
    { 
     if($("#panel").is(":visible")) 
     { 
      $('#panel').slideUp('slow'); 
      $('#hideButton').addClass('reverse'); 
     } 
     else 
     { 

      $('#panel').slideDown('slow'); 
      $('#hideButton').removeClass('reverse');    
     } 
    }) 
})

我用the premade animation效果基本show和了slideDown。再次，你可以改变你的需求。

终于HTML：

<a id="hideButton" href="#" ></a> 
<div id="panel"> 
    <p> 
    Test 
    </p> 
</div>

jsFiddle

来源

2013-10-08 20:54:53 nkmol

jQuery隐藏和显示Attr Src图像不按预期切换

回答

相关问题