jQueryマウスオーバーで配列から

私はnavareaと呼ばれるdivを作って、その中に6つのdivがあります。私が上にマウスを置くと背景色が変わります。jQueryマウスオーバーで配列から

各divの関数に6個のマウスオーバーが必要なのではなく、配列からdivの名前を取得したいと思います。

このようにマウスオーバー機能なしで背景色を変更することはできますが、mouseover機能を追加すると、それは絶対に何もしません。

ご協力いただきありがとうございます。

ビル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 



var mainnav=["dashboard","sales","marketing","production","accounts","logout"]; 


jQuery.each(mainnav, function() { 

$("#" + this).mouseover(function(){ // Why is this line is failing? 
$("#" + this).css("background-color","#8c9aa0"); 
}); 

}); 


}); 
</script> 

<style type="text/css"> 
#navarea { 
height: auto; 
width: 180px; 
background-color:#FFF; 
} 

#dashboard { 
height: auto; 
width: 180px; 
background-color:#FFF; 
} 


</style> 
</head> 

<body> 
<div id="navarea"> 
<div id="dashboard">Dashboard</div> 
<div id="sales">Sales</div> 
<div id="marketing">Marketing</div> 
<div id="production">Production</div> 
<div id="accounts">Accounts</div> 
<div id="logout">Logout</div> 
</div> 

</body> 
</html>

出典

2011-10-29 Bill

CSS '：hover'クラスを使用しない特定の理由はありますか？ – Joey

あなたはそれぞれの機能を適切に使用していません。

$("#mainnav").children().each(function(){ 
    $(this).hover(function(){ 
    $(this).css("background-color","#8c9aa0"); 
    }, function(){ 
    $(this).css("background-color","[insert mouseout color here]"); 
    }); 
});

.hover（）関数：あなたがターゲットにしたいdiv sが親要素の中にある場合、あなただけのこの操作を行う必要があり、（この例では、のは、親要素がmainnavあるとしましょう）上記のように、mouseoverとmouseoutの両方の要素を同じ関数に配置することができます。これによりコードが最小限に抑えられます。
$("#" + this)は意味がありません.jQueryでは$(this)がアクティブな要素を選択します。
私は.children()機能を使用しました。これはすべて、選択された要素内にネストされた要素を選択します。この場合は#mainnavです。

詳細について.each()hereなどについて.children()here。

出典

2011-10-29 15:55:48 Purag

あなたは、単に背景色を変更するCSS :hoverクラスを使用することができます。

#navarea div:hover { 
    background-color: #8c9aa0; 
}

また、あなたがマウスオーバーのリスナーを設定するには、各ループを使用傾けます。マウスオーバー機能は動作しません。 jQueryコード内では、thisではなく$(this)を使用する必要があります。このコードを試してみてください。上のCSSの例が効率的ですが、

$('#navarea div').mouseover(function(){ 
     $(this).css("backgroundColor","#8c9aa0"); 
    });

出典

2011-10-29 15:50:05 Joey

jQueryマウスオーバーで配列から

答えて

関連する問題