Javascript jQuery隐藏和显示属性Src映像未按预期进行切换

因此，我四处搜索并编辑了我找到的show/hide jquery代码，它工作得很好，只是当我单击它时，html img属性没有被替换

我的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>

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

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

$（文档）.ready（函数（）{
var按钮=$（“#隐藏按钮”）；
//在页面加载时检查cookie
如果（$.cookie（'currentToggle'）='hidden'）{
切换面板（按钮，错误）；
}
否则{
切换面板（按钮，真）；
}
//处理显示/隐藏切换按钮的单击
按钮。单击（函数（）{
//根据当前状态，根据需要切换面板
if（button.attr（'src'）==“images/expand.gif”）{
togglePanel（$（此），true）；
}
否则{
togglePanel（$（此），false）；
}
});
});
功能切换面板（按钮，显示）{
变量面板=$（'面板'）；
如果（显示）{
panel.removeClass（“隐藏”）；
attr（'src'，'images/collapse.gif'）；
$.cookie（'currentToggle'，''，{path:'/'}）；
}
否则{
panel.addClass（“隐藏”）；
attr（'src'，'images/expand.gif'）；
$.cookie（'currentToggle'，'hidden'，{path:'/'}）；
}
}

我的HTML代码：

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

试验

---

当我查看我的firebug控制台时，它显示a href src属性的变化，如“

”，而不是实际的“

”元素本身。我该如何解决这个问题？谢谢。

要使函数正常工作，您需要将其更改为更新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完成加载后最小化资源加载时间

编辑：

---

英国皇家空军有一个很好的观点您还必须更新if条件（我忽略了）来检查图像源，而不是锚源。正如他建议的那样，

按钮指的是a标签，如果您想更改img src，则需要使用正确的选择器：

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

在代码中：

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

应该是：

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

---

您也需要在togglePanel功能中执行相同的操作。

如果我没有正确理解您的问题，请原谅。 当单击锚定点时，您希望显示/隐藏面板，单击锚定点时，图像也应更改

为什么不为锚点本身做一个布局，并使用背景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代码：

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

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

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

我使用SlideUp和slideDown。同样，您可以根据自己的需要进行更改

最后是HTML：

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

试验

---

你做得很艰难。UI元素应该使用CSS背景，而不是内联图像。然后，您可以通过交换CSS类名来更改图像。即使你编辑它，你也不会明白他想干什么。研究代码并写下您需要的元素。感谢Diodeus的提示，我将改为这样做。RafH说得好他还必须更新if条件以检查图像源，而不是锚源。谢谢你的提示。虽然最初的折叠图像在css背景下消失了，但我已经开始使用css了。所以我将首先尝试弄清楚这一点，如果它有效，那么我将使用css。