i've got some JS library, thats on click to the html element changes its class. I would like to write function, that would check if class had been changed, and then add image to this element. Can you help me with this?
thanks!
If you're using jQuery try this:
$(document).ready(function() {
// get the class that's set on page load
var current = $('#element').attr('class');
$('#element').click(function(e) {
if ($(this).attr('class') != current) {
// class has been changed, do something
}
});
});
Here is an example at jsFiddle.net.
Disclaimer: Without more details about which elements have onclick event listeners that change which elements` class, I cannot give you real working code for you situation. Instead, I can only give you some logic which I just did.
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").attr('class') == 'b') {
$("#div").append("<p>Hello</p>");
}
});
Or
$("#elemID").click(function() {
$("#div").removeClass('a');
$("#div").addClass('b');
if ($("#div").hasClass('b')) {
$("#div").append("<p>Hello</p>");
}
});
What you can proceed with Krystian is that everytine u click on an element, add a class "say classClicked" to it. Then with the the help of hasClass u can find out the class attached to that element. If is satisfies your condition, add image.
Or if the class changes on each click and you know the name of the changed class, just check using
if($(this).hasClass("b")){
do your action
}
Hope this helps.
Related
I have an asp.net kendo grid and inside i have an element with a class. I want to replace this class with another by clicking on a link that i put on right side.
So i used jquery to do it but it's not seem to be working.. and inside the console of chrome i don't get any error. I've tried to put alert but it's not triggering.
If someone could help here is my jquery
function changetoOK() {
grid.tbody.find("td").onclick(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('customClassVerif');
$(this).addClass('customClassOK');
}
});
}
also i add to create a fake link with an html helper to put it inside my grid so i have this in the grid :
columns.Template(#<text></text>).ClientTemplate(#Html.EmptyLink("Passer à OK").ToHtmlString());
and this in a class
public static class MyHtmlExtensions
{
public static MvcHtmlString EmptyLink(this HtmlHelper helper, string linkText)
{
var tag = new TagBuilder("a");
tag.MergeAttribute("class", "changeToOK");
tag.MergeAttribute("href", "javascript:void(0);");
tag.SetInnerText(linkText);
return MvcHtmlString.Create(tag.ToString());
}
}
[EDIT]
I think it could be good to know. I've made some change inside my code first and here is some explenation.
I have an element inside the grid with a class and i want that class to change to another when i click my link.
I think the problem is because you try use 'onclick' method that doesn't work in jQuery.
Try use .on('click', function(index) ...
.onclick isn't a jquery method, try .click instead, like so:
function changetoOK() {
grid.tbody.find("td").click(function (index) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
This will bind the click event to the td elements, although bear in mind all the function you've provided will do is find all a elements and see if any of them has the class changeToOk. The only reason I mention this is because you're giving the click function an index that is then never used.
This will work as expected :
function changetoOK() {
grid.tbody.find("td").on('click', function (event) {
if ($("a").hasClass('changeToOk'))
{
$(this).removeClass('changeToOk');
$(this).addClass('customClassOK');
}
});
}
So for everyone that want to do the same as me, finaly find out how.
All you have to do is this :
$(document).on('click', '.changeToOK', function () {
$(this).parent().parent().find('.verifyCell').removeClass('customClassVerif').addClass('customClassOK');
})
I added a second class to my first element and it works !
Thanks to everyone who tried to help me.
I have a question that I believe comes down to method preference.
In the following code when the div parent element is clicked on, the div itself expands and also triggers an icon animation
var slideSection6 = document.getElementById("manualsHandbooks").addEventListener("click", function()
{
if (this.parentElement.style.height == "60px" || this.parentElement.style.height == "")
{
this.parentElement.style.height = "215px";
document.getElementById("MAHB").classList.add("active");
}
else
{
this.parentElement.style.height = "60px";
document.getElementById("MAHB").classList.remove("active");
}
}, false);
I was thinking about how easy it was just to add a class and change the state of the icon and I wanted to experiment and try adding the another click event just to the icon to make it animate on a click and active the parent element in the div as well. Basically the reverse of the above.
I thought it would be as simple as adding another condition to the if statement to the effect of
|| document.getElementId("MAHB").classList.add=("active") == true
But this doesn't work and I know it's not proper form. Could someone get me started so I could figure this out?
Element.classList has a toggle method that could make things a bit easier. If you want to check if a certain class is present, you can also use classList.contains.
I'd suggest not using the height of your elements to determine their current state. Why don't you alter the height using an active css class?
Your click handler could then be:
var button = document.getElementById("manualsHandbooks");
button.addEventListener("click", function() {
this.parentElement.classList.toggle("active");
document.getElementById("MAHB").classList.toggle("active");
}, false);
You can read more about classList here: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
I'm having trouble with a jQuery/Angular function being executed on click.
<a ng-click="like()" href="#" class="like like--yes"></a>
Basically, when a click occurs on a like button, I want to toggle the like--yes and the like--no classes. I've inspected the DOM while clicking, and once it has been set to like--no, it refuses to change back.
$scope.like = function() {
$('.like--no').toggleClass('like--no like--yes');
$('.like--yes').toggleClass('like--yes like--no');
}
I need two different functions so to speak, as I'm adding different animations depending on whether it's a like/unlike.
Any idea where I'm going wrong? There's more to it, but I've stripped some of the unnecessary code out for clarity.
Thanks.
I see that you are using AngularJS so instead of using jQuery, why not use ngClass?
Like this:
<a ng-click="toggleLike()" ng-class="{'like--yes': like, 'like--no': !like}">Hello World!</a>
Plunkr
It seems there is a logical issue
$scope.like = function() {
$('.like--no').toggleClass('like--no like--yes');
$('.like--yes').toggleClass('like--yes like--no');
}
Case:- first line changes like--no to like--yes and after that second line changes like--yes to like-- no again.
You should try .hasClass() function to check whether element has class then use toggle.
It seems like the second line is overwritting the first one.
It sets the class to like--yes and the second line catches the like--yes and set it to like--no everytime.
Try something like:
$scope.like = function() {
if( $('.like').hasClass( 'like--yes' ) ) {
$('.like').removeClass( 'like--yes' );
$('.like').addClass( 'like--no' );
} else {
$('.like').removeClass('like--no');
$('.like').addClass('like--yes');
}
}
Maybe you need change $('.link') to $(this) to get the actually clicked element.
It's generally frown upon to deal with DOM jQuery-style inside an Angular's controller, which is what you attempted to do and the other answers suggested.
Just have a variable that reflects the like state (you can set it directly in the View or inside the $scope.like() function and use ng-class to toggle the class:
<a ng-click="like=!like" href="#" ng-class="like ? 'like--yes':'like--no'"></a>
try this
$('.like').on('click',function(e){
e.preventDefault();
$(this).toggleClass('like--no like--yes');
if($(this).text() == 'like'){
$(this).text('unlike');
}else{
$(this).text('like');
}
});
and html
like
JSFIDDLE
Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.
Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example
You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});
I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});
You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/
I know this should be easy stuff, but for some reason the click event is still firing for the element that has a "selected" class.
Can anyone spot the problem with this line?
h.find("li a").not("li a.selected").click(function () {
Use
.not('.selected')
The not() filter applies to the current element
$(function() {
$('div:not[.someclass]').click(function() {
// do stuff
});
});