0

I am trying to create a link <a> with two different backgrounds, one a "Down Arrow" and one an "Up Arrow" depending on the classname arrow-up and arrow-down.

So when you click on the down arrow, the div named product-add-wrapper slides down, and the down arrow* becomes an **up arrow and vice versa.

The problem is, the .toggle + callback seems to work fine, it adds the desired class name and removes the desired class name, however, the background-image doesn't change (the down arrow doesn't become an up arrow).

Here is the html.

<span class="arrow-right">
    <a class="updown arrow-down">&nbsp;</a>
</span>

Here is the css.

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
}

.arrow-down {
    background-image: url('../img/arrow-down.png');
}

And here is the javascript.

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        var classname = $('.updown').attr('class');
        if (classname === 'up arrow-down') {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

Any ideas? Thanks in advance.

4

5 に答える 5

4

クラス名が「上向き矢印-下向き」になることはありません。おそらく「上向き矢印-下向き」を意味していました。

if (classname === 'up arrow-down') {

これはおそらく次のように書き直したほうがよいでしょう。

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        if ($('.updown').hasClass('arrow-down')) {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

またはさらに良い: Js:

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        $('.updown').toggleClass('arrow-up');
    });
});

CSS:

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
    background-image: url('../img/arrow-down.png');
    color:green;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
    color:red;
}

HTML:

<span class="arrow-right">
    <a class="updown">&nbsp;aa</a>
</span>
<div id="product-add-wrapper">
    aa
</div>

Jsfiddle: http://jsfiddle.net/kingmotley/K7274/1/

于 2013-06-14T17:48:44.033 に答える
0

私のためにうまく働く

http://jsfiddle.net/Hzmxc/

$('.updowns').click(function() {
    $('#product-add-wrapper .updown').toggle('slow', function() {
        if ($('.updowns').hasClass('arrow-down')) {
            $('.updowns').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updowns').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});
于 2013-06-14T17:52:42.767 に答える