Addclass is not a function in jQuery
73,040
Solution 1
Try this :
jQuery('.viewport').addClass('viewporthome');
addClass
need a capital "C".
Also, when adding class, you dont need to put the "." in the string or your class will be ..viewporthome
.
Solution 2
Use addClass
instead of addclass
Solution 3
Adding a class:
$(".something").click(function(){
$(this).addClass("style");
});
Removing a class:
$(".something").click(function(){
$(this).removeClass("style");
});
Solution 4
Remove extra dot and use addClass()
not addclass()
jQuery('.viewport').addClass('viewporthome');
Author by
Chris
Updated on June 01, 2020Comments
-
Chris almost 4 years
I have a mouseover function that should add a class to my viewport element, but i get an error in firebug when I mouseover: TypeError: jQuery(...).addclass is not a function.
the HTML is:
<!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title('|','true','right'); ?><?php bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class($class); ?>> <header> <div class="main-logo"> <div id="site-title"> </div><!--.site-title--> </div><!--main-logo--> <div class="header-right"> </div><!--header-right--> </header> <nav class="main"> <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?> </nav> <div class="viewport"> <script type="text/javascript"><!--//--><![CDATA[//><!-- jQuery(document).ready(function(jQuery){ jQuery('nav .home a').mouseover(function() { jQuery('.viewport').addclass('.viewporthome'); }); }); //--><!]]></script> </div> </div>
The related styles are:
.viewport { height: 400px; width: 400px; position: relative; top: -90px; margin: 0 auto; } .viewporthome { background-image: url('images/Screen2.png'); background-repeat: no-repeat; background-position: center; background-attachment: relative; }
The JS file is:
var hoverhome = 'url("images/Screen2.png")'; var empty = ''; var success = 'SUCCESS!'; //home jQuery('nav .home a').hover(function() { jQuery('.viewport').css('background-image', hoverhome); }); jQuery('nav .home a').mouseout(function() { jQuery('.viewport').css('background-image', empty); });