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* bees 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 bee an up arrow).
Here is the html.
<span class="arrow-right">
<a class="updown arrow-down"> </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.
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* bees 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 bee an up arrow).
Here is the html.
<span class="arrow-right">
<a class="updown arrow-down"> </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.
Share Improve this question edited Jun 14, 2013 at 18:00 Hemerson Varela 25.8k18 gold badges72 silver badges69 bronze badges asked Jun 14, 2013 at 17:29 fizzy drinkfizzy drink 6829 silver badges22 bronze badges 8-
I don't see how it could be adding the proper class. This doesn't add up:
$('.up')
and<a class="updown arrow-down">
. AKA change.up
to.updown
. – crush Commented Jun 14, 2013 at 17:31 -
Where is element with
up
class? – u_mulder Commented Jun 14, 2013 at 17:33 - I've updated the javascript, please note. – fizzy drink Commented Jun 14, 2013 at 17:38
-
if (classname === 'up arrow-down') {
is still wrong. If that's what you have in your actual code, then the else case will always be evaluated. – crush Commented Jun 14, 2013 at 17:40 - @crush i'm not sure I understand? What I want is, the toggle to check if 'up arrow-down' is the classname, fire the .addClass + .removeClass. Else, I want it to fire the same thing just switch classes. – fizzy drink Commented Jun 14, 2013 at 17:42
5 Answers
Reset to default 4The classname will never be 'up arrow-down' you probably meant 'updown arrow-down'.
if (classname === 'up arrow-down') {
This would probably be better rewritten like this:
$('.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');
}
});
});
Or better yet: 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"> aa</a>
</span>
<div id="product-add-wrapper">
aa
</div>
Jsfiddle: http://jsfiddle/kingmotley/K7274/1/
Here it is using the .click()
event handler instead of toggle:
$('.updown').click(function (){
if ($(this).hasClass("arrow-down")){
$('#product-add-wrapper').slideUp("slow");
$(this).removeClass('arrow-down').addClass('arrow-up');
} else {
$('#product-add-wrapper').slideDown("slow");
$(this).removeClass('arrow-up').addClass('arrow-down');
};
});
HTML as follows:
<span class="arrow-right">
<a class="updown arrow-down"> </a>
</span>
<div id="product-add-wrapper">
... DIV CONTENT ...
</div>
Working demonstration: http://jsfiddle/9wxfJ/3/
This should work, using hasClass:
$('.updown').click(function() {
$('#product-add-wrapper').toggle('slow', function() {
if($('.updown').hasClass('arrow-down')) {
$('.updown').addClass('arrow-up');
$('.updown').removeClass('arrow-down');
} else {
$('.updown').addClass('arrow-down');
$('.updown').removeClass('arrow-up');
}
});
});
Fiddle: http://jsfiddle/RP294/
Personally, I'd go about this using one class instead of two since you know the element you're working with has a default state. So instead of having an .arrow-down class, just give that background to the .updown class and have the .arrow-up class use !important to overrule it when toggled:
HTML
<span class="arrow-right">
<a class="updown"> </a>
</span>
CSS
.updown {
display: block;
margin-top: -1px;
height: 25px;
width: 25px;
background-image: url('../img/arrow-down.png');
}
.arrow-up {
background-image: url('../img/arrow-up.png') !important;
}
This will also shorten your javascript code quite a bit:
$('body').on('click', '.updown', function(e){
var arrow = $(this);
$('#product-add-wrapper').toggle('slow', function() {
arrow.toggleClass('arrow-up');
});
});
Work fine for me
http://jsfiddle/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');
}
});
});