Ich habe eine Mouseover-Funktion, die meinem Viewport-Element eine Klasse hinzufügen sollte, aber ich bekomme einen Fehler in Firebug, wenn ich mit der Maus übergebe: TypeError: jQuery (...). Addclass ist keine Funktion.
das HTML ist:
<!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>
Die verwandten Stile sind:
.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;
}
Die JS-Datei lautet:
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);
});
Versuche dies :
jQuery('.viewport').addClass('viewporthome');
addClass
benötigt ein "C".
Wenn Sie eine Klasse hinzufügen, müssen Sie nicht das "." In der Zeichenfolge oder Ihrer Klasse wird ..viewporthome
angezeigt.
Verwenden Sie addClass
anstelle von addclass
Klasse hinzufügen:
$(".something").click(function(){
$(this).addClass("style");
});
Klasse entfernen:
$(".something").click(function(){
$(this).removeClass("style");
});
Entfernen Sie den zusätzlichen Punkt und verwenden Sie addClass()
nicht addclass ().
jQuery('.viewport').addClass('viewporthome');
Überprüfen Sie Ihre Großschreibung. Die addClass-Methode hat ein 'C'.
Wenn das Bild immer noch nicht angezeigt wird, liegt möglicherweise ein Problem mit dem relativen Pfad zu Ihrem Bild vor. Wenn sich der Bilderordner nicht im selben Verzeichnis wie Ihre Javascript-Datei befindet, müssen Sie möglicherweise den Pfad ändern. Ich kann nicht genau sagen, was Sie tun müssen, ohne Ihre Verzeichnisstruktur zu kennen.