web-dev-qa-db-fra.com

Addclass n'est pas une fonction dans jQuery

J'ai une fonction mouseover qui devrait ajouter une classe à mon élément viewport, mais j'obtiens une erreur dans firebug lorsque je survole la souris: TypeError: jQuery (...). Addclass n'est pas une fonction.

le HTML est: 

<!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>

Les styles associés sont:

    .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;

}

Le fichier JS est:

      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);
  });
javascriptjqueryhtmlcsswordpress
7
Chris

Essaye ça :

jQuery('.viewport').addClass('viewporthome');

addClass besoin d'un "C" majuscule.

En outre, lors de l'ajout de la classe, vous n'avez pas besoin de mettre le "." dans la chaîne ou votre classe sera ..viewporthome.

15
Karl-André Gagnon

Utilisez addClass au lieu de addclass

5
Claudio Redi

Ajouter une classe:

$(".something").click(function(){
    $(this).addClass("style");
});

Enlever une classe:

$(".something").click(function(){
    $(this).removeClass("style");
});
2
Amir Mehdi Delta

Supprimer le point supplémentaire et utiliser addClass() not addclass ()

jQuery('.viewport').addClass('viewporthome');
1
A. Wolff

Vérifiez votre capitalisation. La méthode addClass a une majuscule 'C'.

Méthode jQuery addClass

Si l'image ne s'affiche toujours pas, le problème est probablement lié au chemin d'accès relatif à votre image. Si le dossier images ne se trouve pas dans le même répertoire que votre fichier Javascript, vous devrez peut-être modifier le chemin. Je ne peux pas dire exactement ce que vous devez faire sans connaître la structure de votre répertoire.

0
DRock Miller