I wanted to ask, if possible to undo action on previous element which fired some event.
To illustrate my question we may use:
HTML :
jQuery :
$('a').on('click',function(e) {
$(this).addClass('ok');
// looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});
If I click first <a> it will add ok class. And all I want to remove this class from <a> on clicking second <a>.
So I click first <a> and it has ok class. Next I click second <a> and second <a> has now ok class but not first one (I called this action Undo).
And is I click third <a>, previous clicked <a> should not have ok class. I hope it's clear.
Just remove the class on the sibling elements
$('a').on('click',function(e) {
$(this).addClass('ok').siblings().removeClass('ok')
});
a {display: block}
.ok {color : red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
Second
Third
Fourth
Just add :
$('a.ok').removeClass('ok'); //if you have 'a' with class 'ok' just in this part of page
//OR
$(this).siblings().removeClass('ok');
Before :
$(this).addClass('ok');
So it will remove the class ok from all a tags then add it to the clicked one.
Hope this helps.
$('a').on('click',function(e) {
$(this).siblings().removeClass('ok');
$(this).addClass('ok');
});
.ok{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
2
3
4
just add the following line after you add the class,
$("a").not(this).removeClass("ok");
so finally your click event function should look like,
$('a').on('click',function(e) {
$(this).addClass('ok');
$("a").not(this).removeClass("ok");
});
it will add ok class on the clicked item, and then remove ok class from any 'a' which is not the clicked one.
for your example you can do somthing like this:
$('a').on('click',function(e) {
$('a.ok').removeClass('ok'); // this will remove ok class from all a
$(this).addClass('ok');
// looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});
This is the Way to remove .ok class from previously clicked element
var prev_a = '';
$('a').on('click',function(e) {
$(this).addClass('ok');
$(prev_a).removeClass('ok');
prev_a = this;
});
I would add a class to all the links that may be clicked and then do the following:
var anchors = $('a.test'); // cache the links for better performance
anchors.on('click',function(e) {
anchors.removeClass('ok'); // remove the class from all anchors
$(this).addClass('ok'); // add the class to this anchor
});
.ok {color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test 1
test 2
test 3
test 4
Related
I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/
Afternoon, fellow overflowers. I have a relatively simple question but cannot wrap my head around what needs to be done. So I am using glyphicons/font awesome as collapsible arrows and need the up and down arrows to swap on click. So on clicking the tag, remove down and add up. On the next click remove up and add down classes. Any ideas? Thanks in advance.
$('.accordion-toggle > i').click(function(){
var open = $(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
$.toggle('open');
});
toggleClass does that. If you start out with one class, that class will be removed (toggled) and the class the element doesn't have will be added, hence toggleClass
$('.accordion-toggle > i').click(function(){
var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
$.toggle('open');
});
You can check if it has a class first with:
if ($(this).hasClass("fa-chevron-down")) {
// add and remove classes
} else {
// add and remove classes
}
and then remove and add the appropriate classes in the if statement.
I'm trying to build a box container that expands when clicking in a "read more" button and collapse to the initial size when clicking in the same button (now a "collapse" button).
In the DOM I have a .leer-mas button inside a .post container. And the following jQuery code:
//When link with class .leer-mas is clicked, get the parent element's id and add some css attributes
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
item.css('height', 'auto');
$(this).addClass('leer-menos');
$(this).text('Leer menos');
});
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$('.leer-mas.leer-menos').click(function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})
The first action works like a charm. But the second action does nothing... And I think I'm missing some fundamentals of jQuery, as the syntax is identical and maybe that is not the way it should be :)
Any ideas? Thanks.
Edit - I had a few errors on my code. Though I'm still trying to get it with a single switcher, I have a working version.
New DOM looks like this:
<div class="post">
<div class="leer mas">
</div>
<div class="leer menos">
</div>
</div>
The code now looks like this:
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.mas').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.css('height', 'auto');
$(this).hide();
$(this).next('.leer.menos').show();
});
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.menos').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.removeAttr('style');
$(this).hide();
$(this).prev('.leer.mas').show();
});
This works smoothly. But If I get it working with the intended structure of the original question (with a single button), i would be happier :)
it is because the class leer-menos is added dynamically... so when the event registration code is executed there is no element with classes leer-mas and leer-menos.
A possible solution is to use event delegation
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$(document).on('click', '.leer-mas.leer-menos', function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})
You're trying to use .removeAttr() to remove a CSS Property within the attribute "Style". This is incorrect, try using item.removeAttr('style');
Not exactly what you asked for, but you can draw ideas from this:
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
// toggle "height" between 'auto' and null
item.css('height', item.css('height') == 'auto' ? null : 'auto' );
// toggle class 'leer-menos'
$(this).toggleClass('leer-menos');
// toggle text between 'Leer menos' and ''
$(this).text( $(this).is('.leer-menos') ? 'Leer menos' : '' );
});
OK so now I have my sliding open ul revealing all the list elements, and now I want the title bar that is clicked on to have a state of selected added to it, and then remove that state when it's closed...
the div above the UL has a class of .regionHeader
here's an example of the mark up
<div class="regionHeader">title of the region</div>
<ul class="region"><li>the region i'm hiding/showing</li></ul>
here's the javascript
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e){
e.preventDefault();
$(this).parent().next('.region').slideToggle(300);
});
});
}
};
$(stockists.start);
I've been trying addClass but it seems to just add the class and not remove it?
Can you not use toggleClass()
This way the class will be added/removed when you need it to be.
$(this).parent().toggleClass("className");
$(this).parent().next('.region').slideToggle(300);
$(this).parent().toggleClass('activeTitle'); // toggling the class on the parent
$(this).parent().next('.region').slideToggle(300);
to remove a class from an element you have to use removeClass
$(element).removeClass("classname");
I have a anchor tag and would like to add a class to it in my document ready function. How do I do that?
Thanks,
Sachin
$(function() {
/* domReady */
$('a').addClass('yourclass');
});
of course if your link has an id use a more specific selector like
$('#yourlink').addClass('yourclass');
$(document).ready(function() {
$('#id1_of_a, #id2_of_a, #id3_of_a').addClass('myClass');
});
$(function() {
$('a:first').addClass('yourclass'); // suppose add class to first <a>
});
or
$('a:eq(1)').addClass('yourclass'); // suppose add class to second <a> and so on
or
$('a#some').addClass('yourclass'); // suppose add class to <a> have id 'some'