0

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

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

4

3 回答 3

0

to make your function work - you will want to change it to instead update the src attribute of the IMG element. not the anchor tag... you can do that like so:

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: '/' });
    }
}

the .find('img') will return the child objects matching the selector of that parameter - for the element you call it on... in this case the anchor tag stored in your variable button...

a few things i would like to note: swapping src attributes might be effective, but you will notice a "flashing" on slower internet connections or as the image sizes gets larger. this is because you are actually having the user make a request and load that image.

the recommended way would be to do this like Diodeus said - utilizing css classes and my preference would be image sprites - that will negate the 'flashing' and minimize resource load times after the DOM has completed loading.

EDIT:

RafH has a good point! - you will also have to update the if conditional ( i overlooked ) to check the image source - not the anchors source. as he suggested

于 2013-10-08T20:40:21.980 回答
0

button refers to the a tag, if you want to change the img src then you need to use the correct selector : 

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

In your code :

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

should be :

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

You need to do the same thing in the togglePanel function too.

于 2013-10-08T20:40:36.803 回答
0

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

为什么不为锚本身做一个布局并使用背景 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');            
        }
    })
})

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

最后是 HTML：

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

jsFiddle

于 2013-10-08T20:54:53.643 回答