jqueryで、○○ is undefind

解決済

質問者：pyon-yon
質問日時：2012/03/06 10:56
回答数：2件

WEBページを作成中です。あるエリア（例id="sub"）のリンクをマウスオーバーすると、そこと関連の深いエリアへのリンク（例id="main"内のリンク）もハイライトする、といったことをやりたいので、
下記のようなコードを書きました。が、sub内リンクに触ると、
「this.product is undefined」となり、思うような動きになりません。
jsコード中にコメントにした部分を生かして表示すると、一応urlをalertするので、いいところまでは行っているように思うのですが。。。どなたか間違いをご指摘くださると助かります。よろしくお願いします。
`
<html>
<head>
<title>TEST</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">
jQuery(function(){
//○○技術コンテンツ（グローバルナビを含む）にマウスオーバー⇒□□製品コンテンツがハイライト
var tech_product = [
{tech:jQuery('a[href *="abcd"]'), product:jQuery('#main a[href *="ABCD"]')},
{tech:jQuery('a[href *="efgh"]'), product:jQuery('#main a[href *="EFGH"]')},
{tech:jQuery('a[href *="ijkl"]'), product:jQuery('#main a[href *="IJKL"]')},
{tech:jQuery('a[href *="mnop"]'), product:jQuery('#main a[href *="MNOP"]')},
{tech:jQuery('a[href *="qrst"]'), product:jQuery('#main a[href *="QRST"]')}
];
jQuery.each(tech_product, function() {
//alert(tech_product[2].tech[0].href);
this.tech.hover(function() {
this.product.addClass('linkage');
}, function() {
this.product.removeClass('linkage');
});
});
});
</script>
</head>
<body>
<div id="sub">
<ul><li><a href="abcd/contents.html">abcdへ</a></li><li><a href="efgh/contents.html">efghへ</a></li><li><a href="ijkl/contents.html">ijklへ</a></li>
<li><a href="mnop/contents.html">MNOPへ</a></li><li><a href="qrst/contents.html">qrstへ</a></li>
</ul>
</dv>
<div id="main">
<ul><li><a href="ABCD/contents.html">ABCDも関係あるよ</a></li><li><a href="EFGH/contents.html">EFGHも関係あるよ</a></li><li><a href="IJKL/contents.html">IJKLも関係あるよ</a></li>
<li><a href="MNOP/contents.html">MNOPも関係あるよ</a></li><li><a href="QRST/contents.html">QRSTも関係あるよ</a></li>
</ul>
</div>
</body>
</html>
`

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： H240S18B73
回答日時：2012/03/06 12:53

普通のeach()と違って、$.each(obj,fn)はthisに値はいらないです

代わりにコールバックの第2引数に値が入ります

jQuery.each(tech_product, function(ind,val) {
val.tech.hover(function() {
val.product.addClass('linkage');
}, function() {
val.product.removeClass('linkage');
});

こんなカンジです

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。バッチリでした。そういえば、この位置に二つの引数を書く構文をある本で見たことがあり、「何でここにこんあのがあるんだ？jquery特有の書き方か？」なんて思っていたヤツでした^^
ちなみに「ind」は書いておくだけで今回は使いませんね。

従来は、長々と個々の場合毎に書いて動作させていたスクリプトがオブジェクト（連想配列）で簡潔に書けてよかったし、別の構想でも応用できそうなので、よいステップになりました。

ありがとうございました。

通報する

お礼日時：2012/03/06 13:25

No.1

回答者： fujillin
回答日時：2012/03/06 12:48

＞jQuery.each(tech_product, function(){

＞　　this.tech.hover( function(){}, function(){} )
＞});
の部分で最初のthisはtech_productの要素を示していますが、hover()内の無名関数内ではthisはhoverの起こった要素になっているはずなので、ご希望の動作をしないのではないでしょうか？
これを回避するには、イベント設定時に変数の内容を確定させておけばよろしいかと思います。

例えば、後半の部分を以下のようにするとか。
（他にもいろいろな方法があると思います。）

var set_class = function(elm, f){
　return function(){ elm.product[f?"addClass":"removeClass"]("linkage"); }
}

jQuery.each(tech_product, function(){
　this.tech.hover(set_class(this,1), set_class(this,0));
});

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。順番が行き違いになってしまいましたが、fujillinさんの方法でも見事に動作しました。javascriptらしい記述方法ですね！勉強になります。

教えて頂きたいのは、
[f?"addClass":"removeClass"]("linkage");
は見慣れない記述です。
f?
というのと
("linkage")をこの位置に書く方法は初めて見る感じです。

今後の為に補足いただければ有難いです。よろしくお願いいたします。

通報する

お礼日時：2012/03/06 13:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！