11

ビューポート要素にクラスを追加するマウスオーバー関数がありますが、マウスオーバーすると firebug でエラーが発生します: TypeError: jQuery(...).addclass is not a function.

HTMLは次のとおりです。

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

関連するスタイルは次のとおりです。

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

}

JS ファイルは次のとおりです。

      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);
  });
4

5 に答える 5

20

これを試して ：

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

addClass大文字の「C」が必要です。

また、クラスを追加するときは、「。」を付ける必要はありません。文字列またはクラスで になります..viewporthome。

于 2013-05-31T20:33:38.957 に答える
6

addClassの代わりに使用addclass

于 2013-05-31T20:26:59.913 に答える
3

クラスの追加:

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

クラスの削除:

$(".something").click(function(){
    $(this).removeClass("style");
});
于 2013-05-31T22:16:25.733 に答える
1

余分なドットを削除し、addClass()addclass() を使用しない

jQuery('.viewport').addClass('viewporthome');
于 2013-05-31T20:27:16.660 に答える
0

大文字小文字を確認してください。addClass メソッドには大文字の 'C' があります。

jQuery addClass メソッド

それでも画像が表示されない場合は、画像への相対パスに問題がある可能性があります。images フォルダが Javascript ファイルと同じディレクトリにない場合は、パスを変更する必要がある場合があります。ディレクトリ構造がわからないと、何をする必要があるか正確にはわかりません。

于 2013-05-31T20:30:10.940 に答える