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

使您的功能正常工作 - 您需要将其更改为更新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条件（我被忽略）来检查图像源 - 而不是锚源。正如他所说的那样

Answer 2

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

Answer 3

很抱歉，如果我没有正确理解你的问题。您想要在单击锚点时显示/隐藏面板，单击它时图像也应该更改。

为什么不为锚本身制作布局并使用后台网址进行更改呢？

#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 SlideUp和slideDown。再次，你可以根据自己的需要改变它。

最后是HTML：

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

<强> jsFiddle

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

3 个答案: