Response title
This is preview!
Move this topic
toggleClass question
in Using jQuery
•
13 years ago
Still new to javascript and jquery, and have a tone of questions. Some I am getting answered by documentation....I tried the toggleClass function on an image and obviously it works. but if the class is toggled why does the below function work always? It seemed to me it should work once then the class is changed to markunread and it should not work again...
$(".markread").click(function() {
$(this).toggleClass("markunread");
});
Thank you very much
maddogandnoriko
$(".markread").click(function() {
$(this).toggleClass("markunread");
});
Thank you very much
maddogandnoriko
1
Replies(9)
Re: toggleClass question
13 years ago
Hi maddogandnoriko,
The toggleClass function is very simple, it does the following:
The strings "remove" and "add" make reference to internal jQuery functions that are very similiar to 'addClass' and 'removeClass'.
It means, when we call:
jQuery, internally, will check if the class name 'lipsum' already exists in the selected element(s), if it exists then the class name 'lipsum' will be removed otherwise the class name 'lipsum' will be added.
Hope it help.
The toggleClass function is very simple, it does the following:
toggleClass: function( classNames ) {
jQuery.className[ jQuery.className.has( this, classNames ) ? "remove" : "add" ]( this, classNames );
}
The strings "remove" and "add" make reference to internal jQuery functions that are very similiar to 'addClass' and 'removeClass'.
It means, when we call:
$('something').toggleClass('lipsum')
jQuery, internally, will check if the class name 'lipsum' already exists in the selected element(s), if it exists then the class name 'lipsum' will be removed otherwise the class name 'lipsum' will be added.
Hope it help.
Leave a comment on zuquirio's reply
Re: toggleClass question
13 years ago
in my first example..i used toggleclass to change the class from markread to markunread. That works. But after that why does the function work even though the class has been changed to markunread? The function should only run on markasread elements....
EDIT...it adds the class right? so it still has markasread, then it has markasread and markasunread? Makes sense...that exactly what you and the docs say. Hence I am off to see if there is a removeClass
maddogandnoriko
EDIT...it adds the class right? so it still has markasread, then it has markasread and markasunread? Makes sense...that exactly what you and the docs say. Hence I am off to see if there is a removeClass
maddogandnoriko
Leave a comment on maddogandnoriko's reply
Re: toggleClass question
13 years ago
Ok so I used add and remove class. That works too. But the function still works for both classes. It must not change the internal class just the displayed class? Basically I am trying to create a image button that does one thing the first time it is clicked then changes class and does another when clicked again.
$(".markread").click(function() {
$(this).removeClass("markread");
$(this).addClass("markunread");
});
$(".markread").click(function() {
$(this).removeClass("markread");
$(this).addClass("markunread");
});
Leave a comment on maddogandnoriko's reply
Re: toggleClass question
13 years ago
Hi maddogandnoriko,
Just to understand you, you want an image button that can change its class once. Like you said, from 'unread' to 'read' and not vice versa? That's right?
Just to understand you, you want an image button that can change its class once. Like you said, from 'unread' to 'read' and not vice versa? That's right?
Leave a comment on zuquirio's reply
Re: toggleClass question
13 years ago
I want it to go back and forth from mark as read to mark as unread and vise-versa, but each time it changes I am going to have it perform different posts to an php/sql file. I think I have the posting covered and I can get the image to change images from one to another but the above function works for both 'states' which means it will also perform the markasread post action everyclick. This works, but seems like it is not as dynamic......then i will have another function for markunread....
$(".markread").click(function() {
$(this).replaceWith('<img src="images/buttons/close.png" class="markunread" alt="Remove from favorites"/>');
});
maddogandnoriko
it probably doesn't make a difference but this is a add to favorites(not bookmarks)/remove from favorites button.
$(".markread").click(function() {
$(this).replaceWith('<img src="images/buttons/close.png" class="markunread" alt="Remove from favorites"/>');
});
maddogandnoriko
it probably doesn't make a difference but this is a add to favorites(not bookmarks)/remove from favorites button.
Leave a comment on maddogandnoriko's reply
Re: toggleClass question
13 years ago
Hi maddogandnoriko,
I think it will help you:
Please give it a try and let me know if this is what you expected to do. If this is good for you, it can be done in less lines code.
I think it will help you:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mariuzzo - jQuery toggle button</title>
<style type="text/css">
.unread {border:#000 solid 2px; color:#000}
.read {border:#999 solid 2px; color:#999}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.toggleRead').click(function(){
var $this = $(this);
if ($this.is('.unread')) {
$this.removeClass('unread').addClass('read').text('Mark as unread');
// do ajax call to mark as READ.
} else if ($this.is('.read')) {
$this.removeClass('read').addClass('unread').text('Mark as read');
// do ajax call to mark as UNREAD.
}
});
});
</script>
</head>
<body>
<button class="toggleRead unread">Mark as read</button>
<button class="toggleRead unread">Mark as read</button>
<button class="toggleRead unread">Mark as read</button>
<button class="toggleRead unread">Mark as read</button>
<button class="toggleRead unread">Mark as read</button>
</body>
</html>
Please give it a try and let me know if this is what you expected to do. If this is good for you, it can be done in less lines code.
Leave a comment on zuquirio's reply
Re: toggleClass question
13 years ago
That's it! I thought I had done something similar with remove and add class but it didn't work as expected. Awesome!
So can you tell me why the following ran even though the markread class was removed?
$(".markread").click(function() {
$(this).removeClass("markread");
$(this).addClass("markunread");
});
You've been a great help. Thank you very very much for your time
maddogandnoriko
So can you tell me why the following ran even though the markread class was removed?
$(".markread").click(function() {
$(this).removeClass("markread");
$(this).addClass("markunread");
});
You've been a great help. Thank you very very much for your time
maddogandnoriko
Leave a comment on maddogandnoriko's reply
Re: toggleClass question
13 years ago
Hi maddogandnoriko,
When the following code is evaluated:
All elements with class name 'markread' (when the code was evaluated) will register a function to the onClick event. Even when the class name 'markread' is removed, the element still registered (because, it was previously registered when the code was evaluated). If you wanted to stop the execution of this event you may need to add the the following:
I'm glad to help when I can.
When the following code is evaluated:
$(".markread").click(function() {
$(this).toggleClass("markunread");
});
All elements with class name 'markread' (when the code was evaluated) will register a function to the onClick event. Even when the class name 'markread' is removed, the element still registered (because, it was previously registered when the code was evaluated). If you wanted to stop the execution of this event you may need to add the the following:
$(".markread").click(function() {
$(this).toggleClass("markunread");
$(this).unbind('click');
});
I'm glad to help when I can.
Leave a comment on zuquirio's reply
Re: toggleClass question
13 years ago
I will be using your code. But now I know what was going wrong for next time.
maddogandnoriko
maddogandnoriko
Leave a comment on maddogandnoriko's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to maddogandnoriko's question