javascript - jQuery 隐藏和显示 Attr Src 图像未按预期切换

Question

所以我四处搜索并编辑了一个我发现的显示/隐藏 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>

我的 HTML 代码:

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

当我查看我的 firebug 控制台时，它显示 href src 属性像“<a ... src="extend.gif">”这样变化，但不是实际的“<img src="">”元素本身。我该如何解决？谢谢。

Answer 1

button 指的是 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 函数中做同样的事情。