Jump to content
N-Europe

Coding Help (jQuery)

Diageo

By Diageo
in General Chit Chat

 Share

Recommended Posts

Diageo Newbie

Diageo

Posted
Posted (edited)

Can anyone tell me why this doesn't work?

 

var enabled = true;

 

$('.button').click(function(){

$('.contact_form').slideToggle();

enabled = !enabled;

});

 

 

 

if (enabled == true) {

$('.contact_area').hover(function(){

$(this).addClass('hover');

}, function(){

$(this).removeClass('hover');

});

} else {

$('.contact_area').removeClass('hover');

}

 

The contact area continues to get the class hover even after I click the button. I want it so that if you click the button, the hover class is no longer added.

Edited by Diageo
Ike Collaborator

Ike

Posted
Posted (edited)

Your missing the dot in the selector:

 

$('contact_area').removeClass('hover');

 

Should be:

 

$('.contact_area').removeClass('hover');

 

Also it would be better to remove the class in the click event. The way you have it coded now it only checks if enabled is true or false once when the JavaScript in first loaded so it will always be true. I'm on my phone so can't explain it properly at the moment.

Edited by Ike
Ike Collaborator

Ike

Posted
Posted (edited)

Move your if statement inside the hover in and out functions.

 

var enabled = true;

$('.button').click(function(){
  $('.contact_form').slideToggle();
  enabled = !enabled;
});


$('.contact_area').hover(function(){
   if(enabled) { 
       $(this).addClass('hover');
   }
}, function(){
  if($(this).hasClass('hover')) {
     $(this).removeClass('hover');
  }
});

Edited by Ike
Ike Collaborator

Ike

Posted
Posted (edited)

I know it does work, I tested it. :P

 

<!DOCTYPE html>
<html>
   <head>
       <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
       <script>
           $(document).ready(function() {
               var enabled = true;

               $('.button').click(function(){
                  $('.contact_form').slideToggle();
                  enabled = !enabled;
               });


               $('.contact_area').hover(function(){
                   if(enabled) {
                       $(this).addClass('hover');
                   }
               }, function(){
                  if($(this).hasClass('hover')) {
                   $(this).removeClass('hover');
                  }
               });
           });
       </script>
       <style>
           .hover {
               border: thick solid #F00;
           }
       </style>
   </head>
   <body>
       <button class="button">Click me!</button>
       <textarea class="contact_area"></textarea>
   </body>
</html>

 

Adds the class hover to the textarea when you hover over it and removes it when you move out. pressing the button stops the class hover being added.

 

Posting your code might help.

Edited by Ike
Diageo Newbie

Diageo

Posted
  • Author
Posted

I changed a mistake I found on my end and it works. Thanks a lot Ike!

 

As a learning opportunity, do you know why my version didn't work so I know not to do it again?

Ike Collaborator

Ike

Posted
Posted

Haha, no problem. That's the thing about JavaScript, if one thing breaks the whole thing stops working.

 

When the browser loads the page it will parse and then execute the JavaScript, so basically anything that isn't a function or an event listener, for example, will get ran straight away and only once.

 

So in your version, as soon as the page loads it runs this:

 

if (enabled == true) {
$('.contact_area').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
} else {
$('.contact_area').removeClass('hover');
}

 

So since you defined enabled to be true earlier it ran the .hover function to bind the event listener to .contact_Area. If you set enabled to be false by default it would try to remove the hover class, but the element won't have it yet anyway.

 

When you press the button, it sets enabled to false, but your if statement doesn't get checked again because as far as JavaScript is concerned it's already been executed, so it doesn't know you want to stop the class being added, so you have to make JavaScript check it again by doing it inside the event listener (in your case the .hover) instead as the function defined in your .hover will get ran every time the hover event is fired. In some cases you could also write a function that does whatever you need and have it get called, but yours didn't need one.

 

So in my version, it will check if enabled is true every time you would hover over the textarea and add the class. When you hover out it checks if the textarea has that class and then removes it if it does.

 

Also the way you had coded it, you would be re-binding the same event over and over every time the button would be pressed and was set to true, you don't need to do this as it already has the event. The only time you would need to do that is if you had unbound the event for some reason, but that's not a good idea usually if you have lots of the same element as it can slow down your page. It's fine if there's a small amount though.

 

Hope that made sense, I'm not great at explaining things.

 Share
Go to topic listing
×
×
  • Create New...